npm - hellfire - Versions diffs - 0.26.4 → 0.26.6 - Mend

hellfire 0.26.4 → 0.26.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.js CHANGED Viewed

@@ -903,7 +903,8 @@ var SET_IO_ON = 'SET_IO_ON';
 var SET_IO_OFF = 'SET_IO_OFF';
 var SET_VIEW_MODE = 'SET_VIEW_MODE';
 var SET_MIP_ACTIVE_TOOL = 'SET_MIP_ACTIVE_TOOL';
-var SET_ACTION_STATE_KEY = 'SET_ACTION_STATE_KEY'; // ---------- Reducers ----------
+var SET_ACTION_STATE_KEY = 'SET_ACTION_STATE_KEY';
+var SET_KEY_IMAGE = 'SET_KEY_IMAGE'; // ---------- Reducers ----------
 var isMobile = ua.isDeviceTypeMobile();
 var initActiveTool = isMobile ? 'StackScroll' : 'Wwwc';
@@ -944,7 +945,9 @@ var initialState$1 = {
   CPR: false,
   referenceLineType: 'image',
   // image or series
-  Sharpen: [] // 每个序列单独管理自己是否锐化的状态
+  Sharpen: [],
+  // 每个序列单独管理自己是否锐化的状态
+  keyImages: [] // 关键图像数据
 };
 var action = (function () {
@@ -1091,6 +1094,13 @@ var action = (function () {
         return _objectSpread$1(_objectSpread$1({}, state), {}, defineProperty({}, action.payload.key, action.payload.value));
       }
+    case SET_KEY_IMAGE:
+      {
+        return _objectSpread$1(_objectSpread$1({}, state), {}, {
+          keyImages: action.payload
+        });
+      }
     default:
       {
         return state;
@@ -1196,6 +1206,12 @@ function setActionStateByKey(payload) {
     payload: payload
   };
 }
+function setKeyImage(data) {
+  return {
+    type: SET_KEY_IMAGE,
+    payload: data
+  };
+}
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -28751,7 +28767,8 @@ var viewport = (function () {
     case SET_SERIES_CURRENT_INDEX:
       {
-        var _seriesCurrentIndex = state.seriesCurrentIndex;
+        var _seriesCurrentIndex = lodash$1.clone(state.seriesCurrentIndex);
         _seriesCurrentIndex[action.payload.seriesIndex] = action.payload.index;
         return _objectSpread$e(_objectSpread$e({}, state), {}, {
           seriesCurrentIndex: _seriesCurrentIndex
@@ -29931,6 +29948,21 @@ const SvgSharpen = props => /*#__PURE__*/React__default.createElement("svg", _ex
   fill: "currentColor"
 }, props), _ref$J);
+function _extends$K() { _extends$K = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+var _ref$K = /*#__PURE__*/React__default.createElement("path", {
+  "data-name": "\\u8054\\u5408 19",
+  d: "M3.779 8.572l-2.96 2.96-.78-.779 2.959-2.96-3-3 .071-.07a4.766 4.766 0 013.376-1.389 4.792 4.792 0 011.362.2l.8-.8a2.77 2.77 0 01.7-2.659l.071-.071 5.2 5.2-.072.071a2.742 2.742 0 01-1.938.791 2.763 2.763 0 01-.72-.1l-.8.8a4.8 4.8 0 01-1.193 4.739l-.071.071zm-2.12-3.68l5.02 5.02a3.7 3.7 0 00.294-2.878l-.178-.579 1.727-1.727.571.167a1.7 1.7 0 00.667.055L6.624 1.814a1.67 1.67 0 00.055.666l.167.571-1.727 1.727L4.54 4.6a3.694 3.694 0 00-1.1-.165 3.684 3.684 0 00-1.777.456z",
+  fill: "rgba(255,255,255,0.9)"
+});
+const SvgKeyImages = props => /*#__PURE__*/React__default.createElement("svg", _extends$K({
+  width: 11.575,
+  height: 11.575,
+  viewBox: "0 0 11.575 11.575",
+  fill: "currentColor"
+}, props), _ref$K);
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
@@ -30769,18 +30801,18 @@ var ConnectedLayoutButton = reactRedux.connect(mapStateToProps, {
 var css_248z$1 = ".paladin-wwwc .paladin-wwwc-item {\n  padding: 3px 20px;\n  font-size: 14px;\n  color: #53585f;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.paladin-wwwc .paladin-wwwc-item:hover {\n  color: #fff;\n  background: #777777;\n}\n.paladin-wwwc .paladin-wwwc-item-prefix {\n  display: inline-block;\n  width: 50px;\n}\n.paladin-wwwc .paladin-wwwc-item-prefix svg {\n  width: 15px;\n  vertical-align: middle;\n}\n.paladin-wwwc .paladin-wwwc-item-label {\n  display: inline-block;\n  width: 55px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow-x: hidden;\n  vertical-align: top;\n}\n.paladin-wwwc .paladin-wwwc-item-value {\n  display: inline-block;\n  width: calc(100% - 100px);\n  text-align: right;\n  font-style: oblique;\n}\n.paladin-wwwc .paladin-wwwc-custom-icon {\n  display: inline-block;\n  width: 1.28571em;\n  height: 1em;\n  margin-right: 2px;\n}\n.paladin-wwwc .paladin-wwwc-custom-icon svg {\n  vertical-align: middle;\n}\n.paladin-wwwc-set-modal .paladin-wwwc-set-table {\n  border-collapse: collapse;\n  width: 100%;\n}\n.paladin-wwwc-set-modal .paladin-wwwc-set-table th,\n.paladin-wwwc-set-modal .paladin-wwwc-set-table td {\n  padding: 16px 0;\n  text-align: center;\n  font-size: 14px;\n}\n.paladin-wwwc-set-modal .paladin-wwwc-set-table th {\n  background: #fafafa;\n}\n.paladin-wwwc-set-modal .paladin-wwwc-set-table th:last-child {\n  width: 250px;\n}\n";
 styleInject$1(css_248z$1);
-function _extends$K() { _extends$K = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+function _extends$L() { _extends$L = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
-var _ref$K = /*#__PURE__*/React__default.createElement("path", {
+var _ref$L = /*#__PURE__*/React__default.createElement("path", {
   d: "M18.286 16q0-1.893-1.339-3.232t-3.232-1.339-3.232 1.339T9.144 16t1.339 3.232 3.232 1.339 3.232-1.339T18.286 16zm9.143-1.946v3.964q0 .214-.143.411t-.357.232l-3.304.5q-.339.964-.696 1.625.625.893 1.911 2.464.179.214.179.446t-.161.411q-.482.661-1.768 1.929t-1.679 1.268q-.214 0-.464-.161l-2.464-1.929q-.786.411-1.625.679-.286 2.429-.518 3.321-.125.5-.643.5h-3.964q-.25 0-.438-.152t-.205-.384l-.5-3.286q-.875-.286-1.607-.661l-2.518 1.911q-.179.161-.446.161-.25 0-.446-.196-2.25-2.036-2.946-3-.125-.179-.125-.411 0-.214.143-.411.268-.375.911-1.188t.964-1.259q-.482-.893-.732-1.768L.52 18.588q-.232-.036-.375-.223t-.143-.42v-3.964q0-.214.143-.411t.339-.232l3.321-.5q.25-.821.696-1.643-.714-1.018-1.911-2.464-.179-.214-.179-.429 0-.179.161-.411.464-.643 1.759-1.92t1.688-1.277q.232 0 .464.179l2.464 1.911q.786-.411 1.625-.679.286-2.429.518-3.321.125-.5.643-.5h3.964q.25 0 .438.152t.205.384l.5 3.286q.875.286 1.607.661l2.536-1.911q.161-.161.429-.161.232 0 .446.179 2.304 2.125 2.946 3.036.125.143.125.393 0 .214-.143.411-.268.375-.911 1.188t-.964 1.259q.464.893.732 1.75l3.268.5q.232.036.375.223t.143.42z"
 });
-const SvgCog = props => /*#__PURE__*/React__default.createElement("svg", _extends$K({
+const SvgCog = props => /*#__PURE__*/React__default.createElement("svg", _extends$L({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$K);
+}, props), _ref$L);
 var css_248z$2 = ".paladin-ipt {\n  box-sizing: border-box;\n  width: 100%;\n  height: 34px;\n  padding: 6px 12px;\n  background-color: transparent;\n  background-image: none;\n  border: 1px solid #ccc;\n  border-radius: 8px;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n  display: block;\n  font-size: 14px;\n  line-height: 1.42857;\n  color: #555;\n}\n.paladin-ipt:focus {\n  outline: none;\n}\n";
 styleInject$1(css_248z$2);
@@ -31011,18 +31043,18 @@ defineProperty(Button, "propTypes", {
   active: PropTypes$1.bool
 });
-function _extends$L() { _extends$L = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+function _extends$M() { _extends$M = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
-var _ref$L = /*#__PURE__*/React__default.createElement("path", {
+var _ref$M = /*#__PURE__*/React__default.createElement("path", {
   d: "M23.179 23.607q0 .714-.5 1.214L20.25 27.25q-.5.5-1.214.5t-1.214-.5L12.572 22l-5.25 5.25q-.5.5-1.214.5t-1.214-.5l-2.429-2.429q-.5-.5-.5-1.214t.5-1.214l5.25-5.25-5.25-5.25q-.5-.5-.5-1.214t.5-1.214l2.429-2.429q.5-.5 1.214-.5t1.214.5l5.25 5.25 5.25-5.25q.5-.5 1.214-.5t1.214.5l2.429 2.429q.5.5.5 1.214t-.5 1.214l-5.25 5.25 5.25 5.25q.5.5.5 1.214z"
 });
-const SvgRemove = props => /*#__PURE__*/React__default.createElement("svg", _extends$L({
+const SvgRemove = props => /*#__PURE__*/React__default.createElement("svg", _extends$M({
   width: 25,
   height: 32,
   viewBox: "0 0 25 32",
   fill: "currentColor"
-}, props), _ref$L);
+}, props), _ref$M);
 function _createSuper$O(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$O(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
@@ -31903,83 +31935,83 @@ var mergeProps$1 = function mergeProps(propsFromState, propsFromDispatch, ownPro
 var ConnectedWwwc = reactRedux.connect(mapStateToProps$1, mapDispatchToProps, mergeProps$1)(Wwwc);
-function _extends$M() { _extends$M = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+function _extends$N() { _extends$N = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
-var _ref$M = /*#__PURE__*/React__default.createElement("path", {
+var _ref$N = /*#__PURE__*/React__default.createElement("path", {
   d: "M22.911 9.661L16.572 16l6.339 6.339 2.571-2.571q.518-.554 1.25-.25.696.304.696 1.054v8q0 .464-.339.804t-.804.339h-8q-.75 0-1.054-.714-.304-.696.25-1.232l2.571-2.571-6.339-6.339-6.339 6.339 2.571 2.571q.554.536.25 1.232-.304.714-1.054.714h-8q-.464 0-.804-.339t-.339-.804v-8q0-.75.714-1.054.696-.304 1.232.25l2.571 2.571L10.854 16 4.515 9.661l-2.571 2.571q-.339.339-.804.339-.214 0-.429-.089-.714-.304-.714-1.054v-8q0-.464.339-.804t.804-.339h8q.75 0 1.054.714.304.696-.25 1.232L7.373 6.802l6.339 6.339 6.339-6.339-2.571-2.571q-.554-.536-.25-1.232.304-.714 1.054-.714h8q.464 0 .804.339t.339.804v8q0 .75-.696 1.054-.232.089-.446.089-.464 0-.804-.339z"
 });
-const SvgFullscreen = props => /*#__PURE__*/React__default.createElement("svg", _extends$M({
+const SvgFullscreen = props => /*#__PURE__*/React__default.createElement("svg", _extends$N({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$M);
+}, props), _ref$N);
-function _extends$N() { _extends$N = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+function _extends$O() { _extends$O = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
-var _ref$N = /*#__PURE__*/React__default.createElement("path", {
+var _ref$O = /*#__PURE__*/React__default.createElement("path", {
   d: "M32 16q0 .464-.339.804l-4.571 4.571q-.339.339-.804.339t-.804-.339-.339-.804v-2.286H6.857v2.286q0 .464-.339.804t-.804.339-.804-.339L.339 16.804Q0 16.465 0 16t.339-.804l4.571-4.571q.339-.339.804-.339t.804.339.339.804v2.286h18.286v-2.286q0-.464.339-.804t.804-.339.804.339l4.571 4.571Q32 15.535 32 16z"
 });
-const SvgResizeHorizontal = props => /*#__PURE__*/React__default.createElement("svg", _extends$N({
+const SvgResizeHorizontal = props => /*#__PURE__*/React__default.createElement("svg", _extends$O({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$N);
+}, props), _ref$O);
-function _extends$O() { _extends$O = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+function _extends$P() { _extends$P = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
-var _ref$O = /*#__PURE__*/React__default.createElement("path", {
+var _ref$P = /*#__PURE__*/React__default.createElement("path", {
   d: "M12.571 5.714q0 .464-.339.804t-.804.339H9.142v18.286h2.286q.464 0 .804.339t.339.804-.339.804l-4.571 4.571Q7.322 32 6.857 32t-.804-.339L1.482 27.09q-.339-.339-.339-.804t.339-.804.804-.339h2.286V6.857H2.286q-.464 0-.804-.339t-.339-.804.339-.804L6.053.339Q6.392 0 6.857 0t.804.339l4.571 4.571q.339.339.339.804z"
 });
-const SvgResizeVertical = props => /*#__PURE__*/React__default.createElement("svg", _extends$O({
+const SvgResizeVertical = props => /*#__PURE__*/React__default.createElement("svg", _extends$P({
   width: 14,
   height: 32,
   viewBox: "0 0 14 32",
   fill: "currentColor"
-}, props), _ref$O);
+}, props), _ref$P);
-function _extends$P() { _extends$P = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
+function _extends$Q() { _extends$Q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
-var _ref$P = /*#__PURE__*/React__default.createElement("path", {
+var _ref$Q = /*#__PURE__*/React__default.createElement("path", {
   d: "M18.286 14.286v1.143q0 .232-.17.402t-.402.17h-4v4q0 .232-.17.402t-.402.17h-1.143q-.232 0-.402-.17t-.17-.402v-4h-4q-.232 0-.402-.17t-.17-.402v-1.143q0-.232.17-.402t.402-.17h4v-4q0-.232.17-.402t.402-.17h1.143q.232 0 .402.17t.17.402v4h4q.232 0 .402.17t.17.402zm2.285.571q0-3.304-2.348-5.652t-5.652-2.348-5.652 2.348-2.348 5.652 2.348 5.652 5.652 2.348 5.652-2.348 2.348-5.652zm9.143 14.857q0 .946-.67 1.616t-1.616.67q-.964 0-1.607-.679l-6.125-6.107q-3.196 2.214-7.125 2.214-2.554 0-4.884-.991t-4.018-2.679T.99 19.74t-.991-4.884.991-4.884 2.679-4.018 4.018-2.679 4.884-.991 4.884.991 4.018 2.679 2.679 4.018.991 4.884q0 3.929-2.214 7.125l6.125 6.125q.661.661.661 1.607z"
 });
-const SvgZoomIn = props => /*#__PURE__*/React__default.createElement("svg", _extends$P({
+const SvgZoomIn = props => /*#__PURE__*/React__default.createElement("svg", _extends$Q({
   width: 30,
   height: 32,
   viewBox: "0 0 30 32",
   fill: "currentColor"
-}, props), _ref$P);
+}, props), _ref$Q);
-function _extends$Q() { _extends$Q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
+function _extends$R() { _extends$R = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
-var _ref$Q = /*#__PURE__*/React__default.createElement("path", {
+var _ref$R = /*#__PURE__*/React__default.createElement("path", {
   d: "M18.286 14.286v1.143q0 .232-.17.402t-.402.17H7.428q-.232 0-.402-.17t-.17-.402v-1.143q0-.232.17-.402t.402-.17h10.286q.232 0 .402.17t.17.402zm2.285.571q0-3.304-2.348-5.652t-5.652-2.348-5.652 2.348-2.348 5.652 2.348 5.652 5.652 2.348 5.652-2.348 2.348-5.652zm9.143 14.857q0 .946-.67 1.616t-1.616.67q-.964 0-1.607-.679l-6.125-6.107q-3.196 2.214-7.125 2.214-2.554 0-4.884-.991t-4.018-2.679T.99 19.74t-.991-4.884.991-4.884 2.679-4.018 4.018-2.679 4.884-.991 4.884.991 4.018 2.679 2.679 4.018.991 4.884q0 3.929-2.214 7.125l6.125 6.125q.661.661.661 1.607z"
 });
-const SvgZoomOut = props => /*#__PURE__*/React__default.createElement("svg", _extends$Q({
+const SvgZoomOut = props => /*#__PURE__*/React__default.createElement("svg", _extends$R({
   width: 30,
   height: 32,
   viewBox: "0 0 30 32",
   fill: "currentColor"
-}, props), _ref$Q);
+}, props), _ref$R);
-function _extends$R() { _extends$R = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+function _extends$S() { _extends$S = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
-var _ref$R = /*#__PURE__*/React__default.createElement("path", {
+var _ref$S = /*#__PURE__*/React__default.createElement("path", {
   d: "M20.571 14.857q0-3.304-2.348-5.652t-5.652-2.348-5.652 2.348-2.348 5.652 2.348 5.652 5.652 2.348 5.652-2.348 2.348-5.652zm9.143 14.857q0 .929-.679 1.607T27.428 32q-.964 0-1.607-.679l-6.125-6.107q-3.196 2.214-7.125 2.214-2.554 0-4.884-.991t-4.018-2.679T.99 19.74t-.991-4.884.991-4.884 2.679-4.018 4.018-2.679 4.884-.991 4.884.991 4.018 2.679 2.679 4.018.991 4.884q0 3.929-2.214 7.125l6.125 6.125q.661.661.661 1.607z"
 });
-const SvgSearch = props => /*#__PURE__*/React__default.createElement("svg", _extends$R({
+const SvgSearch = props => /*#__PURE__*/React__default.createElement("svg", _extends$S({
   width: 30,
   height: 32,
   viewBox: "0 0 30 32",
   fill: "currentColor"
-}, props), _ref$R);
+}, props), _ref$S);
 function _createSuper$R(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$R(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
@@ -32131,22 +32163,22 @@ var mergeProps$2 = function mergeProps(propsFromState, propsFromDispatch, ownPro
 var ConnectedZoom = reactRedux.connect(mapStateToProps$2, mapDispatchToProps$1, mergeProps$2)(Zoom);
-function _extends$S() { _extends$S = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+function _extends$T() { _extends$T = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
-var _ref$S = /*#__PURE__*/React__default.createElement("path", {
+var _ref$T = /*#__PURE__*/React__default.createElement("path", {
   d: "M27.429 4.571v8q0 .464-.339.804t-.804.339h-8q-.75 0-1.054-.714-.304-.696.25-1.232l2.464-2.464q-2.643-2.446-6.232-2.446-1.857 0-3.545.723t-2.92 1.955-1.955 2.92-.723 3.545.723 3.545 1.955 2.92 2.92 1.955 3.545.723q2.125 0 4.018-.929t3.196-2.625q.125-.179.411-.214.268 0 .446.161l2.446 2.464q.161.143.17.366t-.134.402q-1.946 2.357-4.714 3.652t-5.839 1.295q-2.786 0-5.321-1.089t-4.375-2.929-2.929-4.375T0 16.002t1.089-5.321 2.929-4.375 4.375-2.929 5.321-1.089q2.625 0 5.08.991t4.366 2.795l2.321-2.304q.518-.554 1.25-.25.696.304.696 1.054z"
 });
-const SvgRepeat = props => /*#__PURE__*/React__default.createElement("svg", _extends$S({
+const SvgRepeat = props => /*#__PURE__*/React__default.createElement("svg", _extends$T({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$S);
+}, props), _ref$T);
-function _extends$T() { _extends$T = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
+function _extends$U() { _extends$U = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
-var _ref$T = /*#__PURE__*/React__default.createElement("path", {
+var _ref$U = /*#__PURE__*/React__default.createElement("path", {
   fill: "#040000",
   d: "M0 162.517l98.977-82.481v164.961L0 162.517zm17.756 0l69.854 58.211V104.306l-69.854 58.211zM182.945 244.998V80.036l98.979 82.481zM190.486 20.714c-26.433-26.432-68.313-27.806-93.373-2.747L80.636 34.444l6.866 6.866 16.477-16.477c21.284-21.284 56.985-19.911 79.642 2.746L169.889 41.31l48.06 13.731-13.732-48.059-13.731 13.732zm0 0"
 });
@@ -32157,16 +32189,16 @@ var _ref2$a = /*#__PURE__*/React__default.createElement("g", {
   d: "M134.714 224.502h12.496v37.062a6.247 6.247 0 01-12.495 0v-37.062zM134.714 161.948h12.496v48.121h-12.496zM140.962 44.864a6.247 6.247 0 016.249 6.248v32.251h-12.496V51.124a6.25 6.25 0 016.248-6.248v-.012zM134.714 97.796h12.496v48.109h-12.496z"
 }));
-const SvgFlipHorizontal = props => /*#__PURE__*/React__default.createElement("svg", _extends$T({
+const SvgFlipHorizontal = props => /*#__PURE__*/React__default.createElement("svg", _extends$U({
   width: 283.46,
   height: 283.46,
   viewBox: "0 0 283.46 283.46",
   fill: "currentColor"
-}, props), _ref$T, _ref2$a);
+}, props), _ref$U, _ref2$a);
-function _extends$U() { _extends$U = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
+function _extends$V() { _extends$V = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
-var _ref$U = /*#__PURE__*/React__default.createElement("path", {
+var _ref$V = /*#__PURE__*/React__default.createElement("path", {
   fill: "#040000",
   d: "M105.294 0l82.481 98.977H22.813L105.294 0zm0 17.756L47.083 87.61h116.422l-58.211-69.854zM22.813 182.945h164.962l-82.481 98.979zM247.097 190.486c26.432-26.433 27.806-68.313 2.747-93.373l-16.477-16.477-6.866 6.866 16.477 16.477c21.284 21.284 19.911 56.985-2.746 79.642L226.5 169.889l-13.731 48.06 48.059-13.732-13.731-13.731zm0 0"
 });
@@ -32177,12 +32209,12 @@ var _ref2$b = /*#__PURE__*/React__default.createElement("g", {
   d: "M43.309 134.714v12.496H6.247a6.247 6.247 0 010-12.495h37.062zM57.742 134.714h48.121v12.496H57.742zM222.947 140.962a6.247 6.247 0 01-6.248 6.249h-32.251v-12.496h32.239a6.25 6.25 0 016.248 6.248h.012zM121.907 134.714h48.109v12.496h-48.109z"
 }));
-const SvgFlipVertical = props => /*#__PURE__*/React__default.createElement("svg", _extends$U({
+const SvgFlipVertical = props => /*#__PURE__*/React__default.createElement("svg", _extends$V({
   width: 283.46,
   height: 283.46,
   viewBox: "0 0 283.46 283.46",
   fill: "currentColor"
-}, props), _ref$U, _ref2$b);
+}, props), _ref$V, _ref2$b);
 function _createSuper$S(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$S(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
@@ -32303,57 +32335,57 @@ var mergeProps$3 = function mergeProps(propsFromState, propsFromDispatch, ownPro
 var ConnectedRotate = reactRedux.connect(mapStateToProps$3, mapDispatchToProps$2, mergeProps$3)(Rotate);
-function _extends$V() { _extends$V = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
+function _extends$W() { _extends$W = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
-var _ref$V = /*#__PURE__*/React__default.createElement("path", {
+var _ref$W = /*#__PURE__*/React__default.createElement("path", {
   d: "M6.857 20.571v2.286H4.571v-2.286h2.286zm0-13.714v2.286H4.571V6.857h2.286zm13.714 0v2.286h-2.286V6.857h2.286zM2.286 25.125h6.857v-6.839H2.286v6.839zm0-13.696h6.857V4.572H2.286v6.857zm13.714 0h6.857V4.572H16v6.857zM11.429 16v11.429H0V16h11.429zm9.142 9.143v2.286h-2.286v-2.286h2.286zm4.572 0v2.286h-2.286v-2.286h2.286zm0-9.143v6.857h-6.857v-2.286H16v6.857h-2.286V15.999h6.857v2.286h2.286v-2.286h2.286zM11.429 2.286v11.429H0V2.286h11.429zm13.714 0v11.429H13.714V2.286h11.429z"
 });
-const SvgQrcode = props => /*#__PURE__*/React__default.createElement("svg", _extends$V({
+const SvgQrcode = props => /*#__PURE__*/React__default.createElement("svg", _extends$W({
   width: 25,
   height: 32,
   viewBox: "0 0 25 32",
   fill: "currentColor"
-}, props), _ref$V);
+}, props), _ref$W);
-function _extends$W() { _extends$W = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
+function _extends$X() { _extends$X = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
-var _ref$W = /*#__PURE__*/React__default.createElement("path", {
+var _ref$X = /*#__PURE__*/React__default.createElement("path", {
   d: "M26.214 6.786q.5.5.857 1.357t.357 1.571v20.571q0 .714-.5 1.214t-1.214.5h-24q-.714 0-1.214-.5T0 30.285V1.714Q0 1 .5.5T1.714 0h16q.714 0 1.571.357t1.357.857zm-7.928-4.357v6.714H25q-.179-.518-.393-.732l-5.589-5.589q-.214-.214-.732-.393zm6.857 27.285V11.428h-7.429q-.714 0-1.214-.5T16 9.714V2.285H2.286v27.429h22.857zM6.857 14.286q0-.25.161-.411t.411-.161H20q.25 0 .411.161t.161.411v1.143q0 .25-.161.411t-.411.161H7.429q-.25 0-.411-.161t-.161-.411v-1.143zm13.143 4q.25 0 .411.161t.161.411v1.143q0 .25-.161.411t-.411.161H7.429q-.25 0-.411-.161t-.161-.411v-1.143q0-.25.161-.411t.411-.161H20zm0 4.571q.25 0 .411.161t.161.411v1.143q0 .25-.161.411t-.411.161H7.429q-.25 0-.411-.161t-.161-.411v-1.143q0-.25.161-.411t.411-.161H20z"
 });
-const SvgFileTextAlt = props => /*#__PURE__*/React__default.createElement("svg", _extends$W({
+const SvgFileTextAlt = props => /*#__PURE__*/React__default.createElement("svg", _extends$X({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$W);
+}, props), _ref$X);
-function _extends$X() { _extends$X = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
+function _extends$Y() { _extends$Y = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
-var _ref$X = /*#__PURE__*/React__default.createElement("path", {
+var _ref$Y = /*#__PURE__*/React__default.createElement("path", {
   d: "M9.143 22.286v3.429q0 .714-.5 1.214t-1.214.5H1.715q-.714 0-1.214-.5t-.5-1.214v-3.429q0-.714.5-1.214t1.214-.5h5.714q.714 0 1.214.5t.5 1.214zm0-9.143v3.429q0 .714-.5 1.214t-1.214.5H1.715q-.714 0-1.214-.5t-.5-1.214v-3.429q0-.714.5-1.214t1.214-.5h5.714q.714 0 1.214.5t.5 1.214zM32 22.286v3.429q0 .714-.5 1.214t-1.214.5H13.143q-.714 0-1.214-.5t-.5-1.214v-3.429q0-.714.5-1.214t1.214-.5h17.143q.714 0 1.214.5t.5 1.214zM9.143 4v3.429q0 .714-.5 1.214t-1.214.5H1.715q-.714 0-1.214-.5t-.5-1.214V4q0-.714.5-1.214t1.214-.5h5.714q.714 0 1.214.5T9.143 4zM32 13.143v3.429q0 .714-.5 1.214t-1.214.5H13.143q-.714 0-1.214-.5t-.5-1.214v-3.429q0-.714.5-1.214t1.214-.5h17.143q.714 0 1.214.5t.5 1.214zM32 4v3.429q0 .714-.5 1.214t-1.214.5H13.143q-.714 0-1.214-.5t-.5-1.214V4q0-.714.5-1.214t1.214-.5h17.143q.714 0 1.214.5T32 4z"
 });
-const SvgThList = props => /*#__PURE__*/React__default.createElement("svg", _extends$X({
+const SvgThList = props => /*#__PURE__*/React__default.createElement("svg", _extends$Y({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$X);
+}, props), _ref$Y);
-function _extends$Y() { _extends$Y = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
+function _extends$Z() { _extends$Z = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
-var _ref$Y = /*#__PURE__*/React__default.createElement("path", {
+var _ref$Z = /*#__PURE__*/React__default.createElement("path", {
   d: "M23.429 15.946q0-2.875-1.554-5.268L8.411 24.124q2.446 1.589 5.304 1.589 1.982 0 3.777-.777t3.098-2.08 2.071-3.116.768-3.795zm-17.84 5.34L19.071 7.822q-2.411-1.625-5.357-1.625-2.643 0-4.875 1.304t-3.536 3.554-1.304 4.893q0 2.893 1.589 5.339zm21.84-5.34q0 2.804-1.089 5.357t-2.92 4.393-4.375 2.929-5.33 1.089-5.33-1.089-4.375-2.929-2.92-4.393-1.089-5.357 1.089-5.348 2.92-4.384 4.375-2.929 5.33-1.089 5.33 1.089 4.375 2.929 2.92 4.384 1.089 5.348z"
 });
-const SvgBanCircle = props => /*#__PURE__*/React__default.createElement("svg", _extends$Y({
+const SvgBanCircle = props => /*#__PURE__*/React__default.createElement("svg", _extends$Z({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$Y);
+}, props), _ref$Z);
 var css_248z$7 = ".paladin-btn-group .paladin-btn:first-child:not(:last-child) {\n  border-bottom-right-radius: 0;\n  border-top-right-radius: 0;\n}\n.paladin-btn-group .paladin-btn:last-child:not(:first-child) {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n";
 styleInject$1(css_248z$7);
@@ -33021,31 +33053,31 @@ var ConnectedImageTool = reactRedux.connect(mapStateToProps$4, {
   toggleOverlayText: toggleOverlayText
 }, mergeProps$4)(ImageTool);
-function _extends$Z() { _extends$Z = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
+function _extends$_() { _extends$_ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
-var _ref$Z = /*#__PURE__*/React__default.createElement("path", {
+var _ref$_ = /*#__PURE__*/React__default.createElement("path", {
   d: "M9.143 13.143v10.286q0 .25-.161.411t-.411.161H7.428q-.25 0-.411-.161t-.161-.411V13.143q0-.25.161-.411t.411-.161h1.143q.25 0 .411.161t.161.411zm4.571 0v10.286q0 .25-.161.411t-.411.161h-1.143q-.25 0-.411-.161t-.161-.411V13.143q0-.25.161-.411t.411-.161h1.143q.25 0 .411.161t.161.411zm4.572 0v10.286q0 .25-.161.411t-.411.161h-1.143q-.25 0-.411-.161t-.161-.411V13.143q0-.25.161-.411t.411-.161h1.143q.25 0 .411.161t.161.411zm2.285 12.928V9.142h-16v16.929q0 .393.125.723t.259.482.188.152H20q.054 0 .188-.152t.259-.482.125-.723zm-12-19.214h8l-.857-2.089q-.125-.161-.304-.196H9.749q-.179.036-.304.196zm16.572.572v1.143q0 .25-.161.411t-.411.161h-1.714v16.929q0 1.482-.839 2.563T20 29.716H5.143q-1.179 0-2.018-1.045t-.839-2.527v-17H.572q-.25 0-.411-.161T0 8.572V7.429q0-.25.161-.411t.411-.161H6.09l1.25-2.982q.268-.661.964-1.125t1.411-.464h5.714q.714 0 1.411.464t.964 1.125l1.25 2.982h5.518q.25 0 .411.161t.161.411z"
 });
-const SvgTrash = props => /*#__PURE__*/React__default.createElement("svg", _extends$Z({
+const SvgTrash = props => /*#__PURE__*/React__default.createElement("svg", _extends$_({
   width: 25,
   height: 32,
   viewBox: "0 0 25 32",
   fill: "currentColor"
-}, props), _ref$Z);
+}, props), _ref$_);
-function _extends$_() { _extends$_ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
+function _extends$$() { _extends$$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
-var _ref$_ = /*#__PURE__*/React__default.createElement("path", {
+var _ref$$ = /*#__PURE__*/React__default.createElement("path", {
   d: "M16 0q3.25 0 6.214 1.268t5.107 3.411 3.411 5.107T32 16t-1.268 6.214-3.411 5.107-5.107 3.411T16 32t-6.214-1.268-5.107-3.411-3.411-5.107T0 16t1.268-6.214 3.411-5.107 5.107-3.411T16 0zm0 2.286q-3.393 0-6.446 1.607l3.464 3.464q1.464-.5 2.982-.5t2.982.5l3.464-3.464Q19.392 2.286 16 2.286zM3.893 22.446l3.464-3.464q-.5-1.464-.5-2.982t.5-2.982L3.893 9.554Q2.286 12.608 2.286 16t1.607 6.446zM16 29.714q3.393 0 6.446-1.607l-3.464-3.464q-1.464.5-2.982.5t-2.982-.5l-3.464 3.464q3.054 1.607 6.446 1.607zm0-6.857q2.839 0 4.848-2.009T22.857 16t-2.009-4.848T16 9.143t-4.848 2.009T9.143 16t2.009 4.848T16 22.857zm8.643-3.875l3.464 3.464q1.607-3.054 1.607-6.446t-1.607-6.446l-3.464 3.464q.5 1.464.5 2.982t-.5 2.982z"
 });
-const Svg433 = props => /*#__PURE__*/React__default.createElement("svg", _extends$_({
+const Svg433 = props => /*#__PURE__*/React__default.createElement("svg", _extends$$({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$_);
+}, props), _ref$$);
 function _createSuper$X(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$X(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
@@ -33241,31 +33273,31 @@ var LengthTool$1 = /*#__PURE__*/function (_Component) {
 var css_248z$a = ".paladin-global-msg {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 2;\n  padding: 5px 10px;\n  border-radius: 4px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  background: #ffffff;\n  color: #666;\n  font-size: 14px;\n}\n.paladin-global-msg svg {\n  vertical-align: middle;\n  width: 18px !important;\n  height: 18px !important;\n  margin-right: 5px;\n}\n.paladin-global-msg-error svg {\n  color: red;\n}\n.paladin-global-msg-info svg {\n  color: #00a4fe;\n}\n.paladin-global-msg-success svg {\n  color: #2FC761;\n}\n";
 styleInject$1(css_248z$a);
-function _extends$$() { _extends$$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
+function _extends$10() { _extends$10 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
-var _ref$$ = /*#__PURE__*/React__default.createElement("path", {
+var _ref$10 = /*#__PURE__*/React__default.createElement("path", {
   d: "M20.518 20.036q0-.464-.339-.804L16.947 16l3.232-3.232q.339-.339.339-.804 0-.482-.339-.821l-1.607-1.607q-.339-.339-.821-.339-.464 0-.804.339l-3.232 3.232-3.232-3.232q-.339-.339-.804-.339-.482 0-.821.339l-1.607 1.607q-.339.339-.339.821 0 .464.339.804L10.483 16l-3.232 3.232q-.339.339-.339.804 0 .482.339.821l1.607 1.607q.339.339.821.339.464 0 .804-.339l3.232-3.232 3.232 3.232q.339.339.804.339.482 0 .821-.339l1.607-1.607q.339-.339.339-.821zM27.429 16q0 3.732-1.839 6.884t-4.991 4.991-6.884 1.839-6.884-1.839-4.991-4.991T.001 16 1.84 9.116t4.991-4.991 6.884-1.839 6.884 1.839 4.991 4.991T27.429 16z"
 });
-const SvgRemoveSign = props => /*#__PURE__*/React__default.createElement("svg", _extends$$({
+const SvgRemoveSign = props => /*#__PURE__*/React__default.createElement("svg", _extends$10({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$$);
+}, props), _ref$10);
-function _extends$10() { _extends$10 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
+function _extends$11() { _extends$11 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$11.apply(this, arguments); }
-var _ref$10 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$11 = /*#__PURE__*/React__default.createElement("path", {
   d: "M22.929 13.107q0-.5-.321-.821l-1.625-1.607q-.339-.339-.804-.339t-.804.339l-7.286 7.268-4.036-4.036q-.339-.339-.804-.339t-.804.339L4.82 15.518q-.321.321-.321.821 0 .482.321.804l6.464 6.464q.339.339.804.339.482 0 .821-.339l9.696-9.696q.321-.321.321-.804zm4.5 2.893q0 3.732-1.839 6.884t-4.991 4.991-6.884 1.839-6.884-1.839-4.991-4.991T.001 16 1.84 9.116t4.991-4.991 6.884-1.839 6.884 1.839 4.991 4.991T27.429 16z"
 });
-const SvgOkSign = props => /*#__PURE__*/React__default.createElement("svg", _extends$10({
+const SvgOkSign = props => /*#__PURE__*/React__default.createElement("svg", _extends$11({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$10);
+}, props), _ref$11);
 function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -34783,7 +34815,7 @@ var defineProperty$3 = function (obj, key, value) {
   return obj;
 };
-var _extends$11 = Object.assign || function (target) {
+var _extends$12 = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i];
@@ -34805,7 +34837,7 @@ var _extends$11 = Object.assign || function (target) {
  * @returns {Object} ClientRect like output
  */
 function getClientRect(offsets) {
-  return _extends$11({}, offsets, {
+  return _extends$12({}, offsets, {
     right: offsets.left + offsets.width,
     bottom: offsets.top + offsets.height
   });
@@ -35093,7 +35125,7 @@ function computeAutoPlacement(placement, refRect, popper, reference, boundariesE
   };
   var sortedAreas = Object.keys(rects).map(function (key) {
-    return _extends$11({
+    return _extends$12({
       key: key
     }, rects[key], {
       area: getArea(rects[key])
@@ -35735,9 +35767,9 @@ function computeStyle(data, options) {
   };
   // Update `data` attributes, styles and arrowStyles
-  data.attributes = _extends$11({}, attributes, data.attributes);
-  data.styles = _extends$11({}, styles, data.styles);
-  data.arrowStyles = _extends$11({}, data.offsets.arrow, data.arrowStyles);
+  data.attributes = _extends$12({}, attributes, data.attributes);
+  data.styles = _extends$12({}, styles, data.styles);
+  data.arrowStyles = _extends$12({}, data.offsets.arrow, data.arrowStyles);
   return data;
 }
@@ -36017,7 +36049,7 @@ function flip(data, options) {
       // this object contains `position`, we want to preserve it along with
       // any additional property we may add in the future
-      data.offsets.popper = _extends$11({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
+      data.offsets.popper = _extends$12({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
       data = runModifiers(data.instance.modifiers, data, 'flip');
     }
@@ -36291,7 +36323,7 @@ function preventOverflow(data, options) {
   order.forEach(function (placement) {
     var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
-    popper = _extends$11({}, popper, check[side](placement));
+    popper = _extends$12({}, popper, check[side](placement));
   });
   data.offsets.popper = popper;
@@ -36326,7 +36358,7 @@ function shift(data) {
       end: defineProperty$3({}, side, reference[side] + reference[measurement] - popper[measurement])
     };
-    data.offsets.popper = _extends$11({}, popper, shiftOffsets[shiftvariation]);
+    data.offsets.popper = _extends$12({}, popper, shiftOffsets[shiftvariation]);
   }
   return data;
@@ -36858,7 +36890,7 @@ var Popper = function () {
     this.update = debounce(this.update.bind(this));
     // with {} we create a new object with the options inside it
-    this.options = _extends$11({}, Popper.Defaults, options);
+    this.options = _extends$12({}, Popper.Defaults, options);
     // init state
     this.state = {
@@ -36873,13 +36905,13 @@ var Popper = function () {
     // Deep merge modifiers options
     this.options.modifiers = {};
-    Object.keys(_extends$11({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
-      _this.options.modifiers[name] = _extends$11({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
+    Object.keys(_extends$12({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
+      _this.options.modifiers[name] = _extends$12({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
     });
     // Refactoring modifiers' list (Object => Array)
     this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
-      return _extends$11({
+      return _extends$12({
         name: name
       }, _this.options.modifiers[name]);
     })
@@ -37816,83 +37848,83 @@ defineProperty(PopperBox, "propTypes", {
   popoverArrow: PropTypes$1.bool
 });
-function _extends$12() { _extends$12 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$12.apply(this, arguments); }
+function _extends$13() { _extends$13 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
-var _ref$11 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$12 = /*#__PURE__*/React__default.createElement("path", {
   d: "M18.286 21.714q0 .464-.339.804t-.804.339h-16q-.464 0-.804-.339T0 21.714t.339-.804l8-8q.339-.339.804-.339t.804.339l8 8q.339.339.339.804z"
 });
-const SvgCaretUp = props => /*#__PURE__*/React__default.createElement("svg", _extends$12({
+const SvgCaretUp = props => /*#__PURE__*/React__default.createElement("svg", _extends$13({
   width: 18,
   height: 32,
   viewBox: "0 0 18 32",
   fill: "currentColor"
-}, props), _ref$11);
+}, props), _ref$12);
-function _extends$13() { _extends$13 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
+function _extends$14() { _extends$14 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
-var _ref$12 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$13 = /*#__PURE__*/React__default.createElement("path", {
   d: "M18.286 12.571q0 .464-.339.804l-8 8q-.339.339-.804.339t-.804-.339l-8-8Q0 13.036 0 12.571t.339-.804.804-.339h16q.464 0 .804.339t.339.804z"
 });
-const SvgCaretDown = props => /*#__PURE__*/React__default.createElement("svg", _extends$13({
+const SvgCaretDown = props => /*#__PURE__*/React__default.createElement("svg", _extends$14({
   width: 18,
   height: 32,
   viewBox: "0 0 18 32",
   fill: "currentColor"
-}, props), _ref$12);
+}, props), _ref$13);
-function _extends$14() { _extends$14 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
+function _extends$15() { _extends$15 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$15.apply(this, arguments); }
-var _ref$13 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$14 = /*#__PURE__*/React__default.createElement("path", {
   d: "M24.714 16.554L1 29.733q-.411.232-.705.054T0 29.144V2.858q0-.464.295-.643T1 2.269l23.714 13.179q.411.232.411.554t-.411.554z"
 });
-const SvgPlay = props => /*#__PURE__*/React__default.createElement("svg", _extends$14({
+const SvgPlay = props => /*#__PURE__*/React__default.createElement("svg", _extends$15({
   width: 25,
   height: 32,
   viewBox: "0 0 25 32",
   fill: "currentColor"
-}, props), _ref$13);
+}, props), _ref$14);
-function _extends$15() { _extends$15 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$15.apply(this, arguments); }
+function _extends$16() { _extends$16 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$16.apply(this, arguments); }
-var _ref$14 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$15 = /*#__PURE__*/React__default.createElement("path", {
   d: "M31.196 2.518q.339-.339.571-.232t.232.571v26.286q0 .464-.232.571t-.571-.232L18.517 16.803q-.161-.161-.232-.339v12.679q0 .464-.232.571t-.571-.232L4.803 16.803q-.161-.161-.232-.339v12.107q0 .464-.339.804t-.804.339H1.142q-.464 0-.804-.339t-.339-.804V3.428q0-.464.339-.804t.804-.339h2.286q.464 0 .804.339t.339.804v12.107q.071-.179.232-.339L17.482 2.517q.339-.339.571-.232t.232.571v12.679q.071-.179.232-.339z"
 });
-const SvgFastBackward = props => /*#__PURE__*/React__default.createElement("svg", _extends$15({
+const SvgFastBackward = props => /*#__PURE__*/React__default.createElement("svg", _extends$16({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$14);
+}, props), _ref$15);
-function _extends$16() { _extends$16 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$16.apply(this, arguments); }
+function _extends$17() { _extends$17 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
-var _ref$15 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$16 = /*#__PURE__*/React__default.createElement("path", {
   d: "M.804 29.482q-.339.339-.571.232t-.232-.571V2.857q0-.464.232-.571t.571.232l12.679 12.679q.161.161.232.339V2.857q0-.464.232-.571t.571.232l12.679 12.679q.161.161.232.339V3.429q0-.464.339-.804t.804-.339h2.286q.464 0 .804.339t.339.804v25.143q0 .464-.339.804t-.804.339h-2.286q-.464 0-.804-.339t-.339-.804V16.465q-.071.179-.232.339L14.518 29.483q-.339.339-.571.232t-.232-.571V16.465q-.071.179-.232.339z"
 });
-const SvgFastForward = props => /*#__PURE__*/React__default.createElement("svg", _extends$16({
+const SvgFastForward = props => /*#__PURE__*/React__default.createElement("svg", _extends$17({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$15);
+}, props), _ref$16);
-function _extends$17() { _extends$17 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
+function _extends$18() { _extends$18 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
-var _ref$16 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$17 = /*#__PURE__*/React__default.createElement("path", {
   d: "M27.429 3.429v25.143q0 .464-.339.804t-.804.339h-9.143q-.464 0-.804-.339T16 28.572V3.429q0-.464.339-.804t.804-.339h9.143q.464 0 .804.339t.339.804zm-16 0v25.143q0 .464-.339.804t-.804.339H1.143q-.464 0-.804-.339T0 28.572V3.429q0-.464.339-.804t.804-.339h9.143q.464 0 .804.339t.339.804z"
 });
-const SvgPause = props => /*#__PURE__*/React__default.createElement("svg", _extends$17({
+const SvgPause = props => /*#__PURE__*/React__default.createElement("svg", _extends$18({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$16);
+}, props), _ref$17);
 var css_248z$c = ".paladin-cine-row {\n  padding: 3px 20px;\n  width: 100%;\n  height: 40px;\n}\n.paladin-cine-row .paladin-cine-label {\n  font-size: 12px;\n  color: #727882;\n  justify-content: center;\n  white-space: nowrap;\n}\n.paladin-cine-row .paladin-cine-input {\n  padding: 0 8px;\n  justify-content: center;\n  align-items: center;\n}\n.paladin-cine-row .paladin-cine-input input {\n  height: 20px;\n  padding: 0;\n  width: 80%;\n}\n.paladin-cine-row .paladin-cine-svg {\n  height: 100%;\n}\n.paladin-cine-row .paladin-cine-svg .paladin-row {\n  height: 20px;\n}\n.paladin-cine-row .paladin-cine-svg svg {\n  fill: #727882;\n}\n.paladin-cine-svg-play svg {\n  width: 12px !important;\n  height: 12px !important;\n  fill: #727882;\n}\n";
 styleInject$1(css_248z$c);
@@ -38882,8 +38914,8 @@ defineProperty(Scrollable, "propTypes", {
   disabled: PropTypes$1.any
 });
-function _extends$18() {
-  _extends$18 = Object.assign || function (target) {
+function _extends$19() {
+  _extends$19 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
@@ -38897,7 +38929,7 @@ function _extends$18() {
     return target;
   };
-  return _extends$18.apply(this, arguments);
+  return _extends$19.apply(this, arguments);
 }
 function _arrayWithHoles$1(arr) {
@@ -40509,7 +40541,7 @@ function sortableContainer(WrappedComponent) {
       key: "render",
       value: function render() {
         var ref = config.withRef ? 'wrappedInstance' : null;
-        return React.createElement(WrappedComponent, _extends$18({
+        return React.createElement(WrappedComponent, _extends$19({
           ref: ref
         }, omit(this.props, omittedProps)));
       }
@@ -40642,7 +40674,7 @@ function sortableElement(WrappedComponent) {
       key: "render",
       value: function render() {
         var ref = config.withRef ? 'wrappedInstance' : null;
-        return React.createElement(WrappedComponent, _extends$18({
+        return React.createElement(WrappedComponent, _extends$19({
           ref: ref
         }, omit(this.props, omittedProps$1)));
       }
@@ -40746,9 +40778,9 @@ var SettingModal = /*#__PURE__*/function (_Component) {
   return SettingModal;
 }(React.Component);
-function _extends$19() { _extends$19 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
+function _extends$1a() { _extends$1a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
-var _ref$17 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$18 = /*#__PURE__*/React__default.createElement("path", {
   d: "M59.661.336L0 34.781v68.357l59.661-33.913V.336zm-8.165 60.185l-8.928 4.966s.123-30.196.373-33.682l-.186.103c-.497 3.378-.993 5.946-1.488 7.709l-7.624 30.836-7.811 4.345-7.625-23.096a215.946 215.946 0 01-1.488-5.495l-.186.104c0 .744.061 1.764.186 3.058.123 3.651.186 30.396.186 30.396l-8.74 4.863V43.713l13.761-7.656 7.253 22.745c.122.676.308 2.061.557 4.153 0-.371.062-.899.186-1.59 0-1.61.122-2.672.372-3.183l7.253-30.815 13.948-7.76v40.914zm0 0M92.144 37.107l-6.632-3.974v13.466l6.632 3.973c5.225 2.999 7.905 2.325 8.039-2.017-.134-4.367-2.814-8.183-8.039-11.448zm0 0"
 });
@@ -40760,30 +40792,30 @@ var _ref3$3 = /*#__PURE__*/React__default.createElement("path", {
   d: "M1.249 106.95l60.127 34.714 59.466-34.332-59.469-34.558L1.249 106.95zm74.547-7.361c.112 6.218-2.94 10.004-9.156 11.36l11.021 14.921H66.98l-9.156-14.582h-4.917v14.582h-8.478V88.568h17.125c9.157.227 13.904 3.9 14.242 11.021zm0 0"
 });
-const SvgMpr = props => /*#__PURE__*/React__default.createElement("svg", _extends$19({
+const SvgMpr = props => /*#__PURE__*/React__default.createElement("svg", _extends$1a({
   width: 142,
   height: 142,
   viewBox: "0 0 142 142",
   fill: "currentColor"
-}, props), _ref$17, _ref2$c, _ref3$3);
+}, props), _ref$18, _ref2$c, _ref3$3);
-function _extends$1a() { _extends$1a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
+function _extends$1b() { _extends$1b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1b.apply(this, arguments); }
-var _ref$18 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$19 = /*#__PURE__*/React__default.createElement("path", {
   "data-name": "\\u51CF\\u53BB 6",
   d: "M128 85H9a9.01 9.01 0 01-9-9V9a9.01 9.01 0 019-9h119a9.01 9.01 0 019 9v67a9.01 9.01 0 01-9 9zM93.259 17.92v49.157h7.706V51.143h5.351a25.3 25.3 0 007.142-.887 10.88 10.88 0 004.882-2.9 12.193 12.193 0 002.794-5.206 30.158 30.158 0 00.88-7.863 31.849 31.849 0 00-.764-7.439 11.483 11.483 0 00-2.587-5.1 10.638 10.638 0 00-4.852-2.9 26.27 26.27 0 00-7.5-.922zm-22.094 0v49.157h7.7V17.92zm-22.606 9.067v40.09h7.586V17.92H44.034L35.8 46.961h-.354l-8-29.041h-12.46v49.157h7.526v-40.09h.354l8.7 30.176h7.879l8.763-30.176h.349zm56.813 16.645h-4.407V25.43h4.407c3.241 0 5.536.667 6.822 1.982s1.94 3.677 1.94 7.014a18.955 18.955 0 01-.44 4.46 6.186 6.186 0 01-1.47 2.835 5.6 5.6 0 01-2.7 1.486 17.364 17.364 0 01-4.152.426z"
 });
-const SvgMip = props => /*#__PURE__*/React__default.createElement("svg", _extends$1a({
+const SvgMip = props => /*#__PURE__*/React__default.createElement("svg", _extends$1b({
   width: 137,
   height: 85,
   viewBox: "0 0 137 85",
   fill: "currentColor"
-}, props), _ref$18);
+}, props), _ref$19);
-function _extends$1b() { _extends$1b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1b.apply(this, arguments); }
+function _extends$1c() { _extends$1c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1c.apply(this, arguments); }
-var _ref$19 = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1a = /*#__PURE__*/React__default.createElement("path", {
   d: "M11.217 10.354l1.672 4.76 1.698-4.76h1.366l-2.49 6.326h-1.212l-2.398-6.326zM21.513 15.722a4.73 4.73 0 00-.073-.617 2.253 2.253 0 00-.149-.436 1.319 1.319 0 00-.308-.432 1.8 1.8 0 00-.503-.28c.278-.102.503-.249.674-.446.273-.33.41-.795.41-1.395a1.91 1.91 0 00-.176-.821 1.521 1.521 0 00-.5-.602c-.313-.228-.868-.341-1.665-.341h-2.775v6.328h1.212v-2.4h.972c.42-.007.74.057.963.19.176.114.308.268.396.465.088.197.147.477.176.844.045.455.088.757.128.901h1.357c-.058-.182-.105-.502-.139-.958zm-1.558-2.713c-.119.095-.32.142-.607.142H17.65v-1.67h1.698c.216 0 .372.019.47.057.273.109.41.353.41.74 0 .349-.09.591-.273.731z"
 });
@@ -40795,25 +40827,25 @@ var _ref3$4 = /*#__PURE__*/React__default.createElement("path", {
   d: "M25.938 10.351c-1.25-.931-3.022-1.704-5.13-2.237-.277-.057-.577.109-.649.39a.531.531 0 00.389.65c3.958.998 6.419 2.789 6.419 4.674 0 .663-.306 1.32-.913 1.954-.626.659-1.54 1.257-2.718 1.779-2.478 1.099-5.787 1.703-9.317 1.703-3.53 0-6.839-.604-9.319-1.703-1.176-.523-2.09-1.122-2.718-1.779-.604-.63-.911-1.287-.911-1.954 0-.856.526-1.712 1.515-2.494l1.097 1.589 2.048-4.4-4.842.354 1.089 1.577C.688 11.456 0 12.616 0 13.828c0 1.821 1.515 3.495 4.268 4.714 2.614 1.158 6.076 1.795 9.753 1.795s7.137-.638 9.745-1.798c2.753-1.219 4.268-2.893 4.268-4.714 0-1.249-.724-2.452-2.096-3.474z"
 });
-const SvgVr = props => /*#__PURE__*/React__default.createElement("svg", _extends$1b({
+const SvgVr = props => /*#__PURE__*/React__default.createElement("svg", _extends$1c({
   width: 28.346,
   height: 28.346,
   viewBox: "0 0 28.346 28.346",
   fill: "currentColor"
-}, props), _ref$19, _ref2$d, _ref3$4);
+}, props), _ref$1a, _ref2$d, _ref3$4);
-function _extends$1c() { _extends$1c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1c.apply(this, arguments); }
+function _extends$1d() { _extends$1d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1d.apply(this, arguments); }
-var _ref$1a = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1b = /*#__PURE__*/React__default.createElement("path", {
   d: "M10.286 16q0 .464-.339.804l-8 8q-.339.339-.804.339t-.804-.339T0 24V8q0-.464.339-.804t.804-.339.804.339l8 8q.339.339.339.804z"
 });
-const SvgCaretRight = props => /*#__PURE__*/React__default.createElement("svg", _extends$1c({
+const SvgCaretRight = props => /*#__PURE__*/React__default.createElement("svg", _extends$1d({
   width: 11,
   height: 32,
   viewBox: "0 0 11 32",
   fill: "currentColor"
-}, props), _ref$1a);
+}, props), _ref$1b);
 var css_248z$f = ".lightHoverStyle {\n  background-color: #d4d4d4;\n  color: #333;\n}\n.darkHoverStyle {\n  color: black !important;\n  background-color: #a4a4a4;\n  border-color: #8c8c8c;\n}\n.paladin-tool-button,\n.paladin-tool-button-nohover {\n  text-align: center;\n  width: 64px;\n  height: 56px;\n  color: white;\n  line-height: 56px;\n  cursor: pointer;\n}\n.paladin-tool-button:active,\n.paladin-tool-button-nohover:active {\n  background-color: #d4d4d4;\n  color: #333;\n}\n.paladin-show-more-button,\n.paladin-show-more-button-nohover {\n  display: flex;\n  flex-direction: column;\n  width: 20px;\n  height: 56px;\n  line-height: 56px;\n  justify-content: center;\n  align-items: center;\n  color: white;\n  cursor: pointer;\n}\n.paladin-show-more-button:hover,\n.paladin-tool-button:hover,\n.paladin-more-active {\n  color: black !important;\n  background-color: #a4a4a4;\n  border-color: #8c8c8c;\n}\n.paladin-tool-active {\n  background-color: #d4d4d4;\n  color: #333;\n}\n.paladin-tool-active:hover {\n  background-color: #d4d4d4;\n  color: #333;\n}\n.paladin-dicomToolItem-text {\n  height: 100%;\n  display: inline-block;\n}\n";
 styleInject$1(css_248z$f);
@@ -41014,9 +41046,9 @@ defineProperty(DicomToolItem, "propTypes", {
   buttonWidth: PropTypes$1.number
 });
-function _extends$1d() { _extends$1d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1d.apply(this, arguments); }
+function _extends$1e() { _extends$1e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1e.apply(this, arguments); }
-var _ref$1b = /*#__PURE__*/React__default.createElement("g", {
+var _ref$1c = /*#__PURE__*/React__default.createElement("g", {
   opacity: 0.5
 }, /*#__PURE__*/React__default.createElement("path", {
   fill: "#FFF",
@@ -41028,12 +41060,12 @@ var _ref2$e = /*#__PURE__*/React__default.createElement("path", {
   d: "M128.104.646l11.434 11.096a2.36 2.36 0 01.732 1.702c0 .638-.264 1.252-.732 1.703a2.536 2.536 0 01-3.508 0l-3.824-3.712-6.22 6.179 13.402 13.026c.468.45.732 1.063.732 1.702 0 .64-.264 1.252-.732 1.703a2.545 2.545 0 01-1.754.674 2.538 2.538 0 01-1.754-.707l-5.182-5.029-25.38 25.303a9.602 9.602 0 01-6.839 2.834 9.604 9.604 0 01-6.84-2.832l-1.047-1.048-8.739 8.742a2.53 2.53 0 01-1.778.739 2.536 2.536 0 01-2.524-2.519c0-.669.269-1.31.744-1.781l8.739-8.743-1.053-1.055a9.717 9.717 0 010-13.709l25.02-25.046-5.846-5.673a2.363 2.363 0 01-.637-2.333A2.452 2.452 0 01106.28.159a2.537 2.537 0 012.4.631l13.907 13.518L128.77 8.1l-4.173-4.049a2.358 2.358 0 01.062-3.345 2.534 2.534 0 013.445-.06zM94.112 33.519a2.144 2.144 0 00-.582 2.823l.101.153 6.922 6.792a2.29 2.29 0 003.061-.453 2.158 2.158 0 00.568-2.838l-.101-.153-6.906-6.776a2.292 2.292 0 00-3.063.452zm7.072-6.888a2.142 2.142 0 00-.599 2.82l.101.155 4.276 4.285a2.293 2.293 0 003.061-.403 2.176 2.176 0 00.598-2.837l-.098-.155-4.276-4.285c-.718-.76-2.081-.518-3.063.42zm0 0"
 });
-const SvgCentesis = props => /*#__PURE__*/React__default.createElement("svg", _extends$1d({
+const SvgCentesis = props => /*#__PURE__*/React__default.createElement("svg", _extends$1e({
   width: 141.73,
   height: 141.73,
   viewBox: "0 0 141.73 141.73",
   fill: "currentColor"
-}, props), _ref$1b, _ref2$e);
+}, props), _ref$1c, _ref2$e);
 function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -41341,20 +41373,36 @@ var DicomToolItemPlus = /*#__PURE__*/function (_Component) {
           mipActiveTool = _this$props2.mipActiveTool,
           activeIndex = _this$props2.activeIndex,
           col = _this$props2.col,
-          currentScrollLine = _this$props2.currentScrollLine;
+          currentScrollLine = _this$props2.currentScrollLine,
+          seriesCurrentIndex = _this$props2.seriesCurrentIndex,
+          series = _this$props2.series,
+          currentSeries = _this$props2.currentSeries;
       var name = tool.name,
           is3DMouseActionTool = tool.is3DMouseActionTool,
-          singleActiveWithArray = tool.singleActiveWithArray;
+          singleActiveWithArray = tool.singleActiveWithArray,
+          activeWithImageId = tool.activeWithImageId;
       /**
        * 高亮：
        * 1.activeTool匹配 （比如 窗宽窗位、缩放）
-       * 2.match 匹配 （比如测量中的选择）
+       * 2.match匹配 （如测量工具）
        * 3.state中的激活
        * 4.开关式的工具 （比如自动联动 播放 定位线 同步）
        * 5.singleActiveWithArray的tool 状态是数组中单独维持的
+       * 6.activeWithImageId 如关键图
        */
       var realSeriesIndex = col * currentScrollLine + activeIndex;
+      if (activeWithImageId) {
+        var _currentImageIdIndex = seriesCurrentIndex[realSeriesIndex];
+        var SOPInstanceUID = currentSeries.SOPInstanceUIDs[_currentImageIdIndex];
+        var seriesInstanceUID = currentSeries.seriesInstanceUID;
+        return this.props[name] && lodash$1.find(this.props[name], {
+          SOPInstanceUID: SOPInstanceUID,
+          seriesInstanceUID: seriesInstanceUID
+        }) ? ' paladin-tool-item-plus-main-active' : '';
+      }
       return activeTool === name || !singleActiveWithArray && this.props[name] || singleActiveWithArray && this.props[name][realSeriesIndex] || is3DMouseActionTool && mipActiveTool === name ? ' paladin-tool-item-plus-main-active' : '';
     }
   }, {
@@ -41362,9 +41410,7 @@ var DicomToolItemPlus = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
-      var _this$props3 = this.props,
-          data = _this$props3.data,
-          activeTool = _this$props3.activeTool;
+      var data = this.props.data;
       return /*#__PURE__*/React__default.createElement("div", {
         className: "paladin-tool-item-plus",
         style: {
@@ -41424,31 +41470,31 @@ defineProperty(DicomToolItemPlus, "propTypes", {
   data: PropTypes$1.any
 });
-function _extends$1e() { _extends$1e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1e.apply(this, arguments); }
+function _extends$1f() { _extends$1f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1f.apply(this, arguments); }
-var _ref$1c = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1d = /*#__PURE__*/React__default.createElement("path", {
   d: "M11.429 8v16q0 .464-.339.804t-.804.339-.804-.339l-8-8q-.339-.339-.339-.804t.339-.804l8-8q.339-.339.804-.339t.804.339.339.804z"
 });
-const SvgCaretLeft = props => /*#__PURE__*/React__default.createElement("svg", _extends$1e({
+const SvgCaretLeft = props => /*#__PURE__*/React__default.createElement("svg", _extends$1f({
   width: 11,
   height: 32,
   viewBox: "0 0 11 32",
   fill: "currentColor"
-}, props), _ref$1c);
+}, props), _ref$1d);
-function _extends$1f() { _extends$1f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1f.apply(this, arguments); }
+function _extends$1g() { _extends$1g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1g.apply(this, arguments); }
-var _ref$1d = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1e = /*#__PURE__*/React__default.createElement("path", {
   d: "M16 24.571v-3.429q0-.25-.161-.411t-.411-.161h-3.429q-.25 0-.411.161t-.161.411v3.429q0 .25.161.411t.411.161h3.429q.25 0 .411-.161t.161-.411zm4.571-12q0-1.571-.991-2.911t-2.473-2.071-3.036-.732q-4.339 0-6.625 3.804-.268.429.143.75l2.357 1.786q.125.107.339.107.286 0 .446-.214.946-1.214 1.536-1.643.607-.429 1.536-.429.857 0 1.527.464t.67 1.054q0 .679-.357 1.089t-1.214.804q-1.125.5-2.063 1.545t-.938 2.241v.643q0 .25.161.411t.411.161h3.429q.25 0 .411-.161t.161-.411q0-.339.384-.884t.973-.884q.571-.321.875-.509t.821-.625.795-.857.5-1.08.223-1.446zM27.429 16q0 3.732-1.839 6.884t-4.991 4.991-6.884 1.839-6.884-1.839-4.991-4.991T.001 16 1.84 9.116t4.991-4.991 6.884-1.839 6.884 1.839 4.991 4.991T27.429 16z"
 });
-const SvgQuestionSign = props => /*#__PURE__*/React__default.createElement("svg", _extends$1f({
+const SvgQuestionSign = props => /*#__PURE__*/React__default.createElement("svg", _extends$1g({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$1d);
+}, props), _ref$1e);
 var css_248z$h = ".paladin-vr-cine {\n  min-width: 220px;\n  font-size: 14px;\n  color: #c0c0c0;\n  background: #353535;\n  padding-bottom: 8px;\n}\n.paladin-vr-cine .paladin-vr-cine-click {\n  cursor: pointer;\n}\n.paladin-vr-cine .paladin-vr-cine-active {\n  cursor: pointer;\n  background: #0d5075;\n  color: #fff;\n}\n.paladin-vr-cine .paladin-vr-cine-active svg {\n  fill: #fff;\n}\n.paladin-vr-cine svg {\n  width: 12px !important;\n  height: 12px !important;\n  fill: #c0c0c0;\n}\n.paladin-vr-cine .paladin-vr-cine-row {\n  padding: 3px 0;\n  width: 100%;\n  height: 40px;\n}\n.paladin-vr-cine .paladin-vr-cine-speed {\n  padding-left: 12px;\n}\n.paladin-vr-cine .paladin-vr-cine-speed .paladin-cine-label {\n  font-size: 12px;\n  justify-content: center;\n  white-space: nowrap;\n}\n.paladin-vr-cine .paladin-vr-cine-speed .paladin-cine-input {\n  justify-content: center;\n  align-items: center;\n}\n.paladin-vr-cine .paladin-vr-cine-speed .paladin-cine-input input {\n  height: 20px;\n  padding: 0;\n  width: 80%;\n  border-color: #c0c0c0;\n  color: #c0c0c0;\n}\n.paladin-vr-cine .paladin-vr-cine-angle {\n  font-size: 12px;\n  padding-left: 12px;\n  padding-right: 5px;\n  margin: 5px 0;\n}\n.paladin-vr-cine .paladin-vr-cine-angle .paladin-vr-cine-angle-item {\n  border: 1px solid #666;\n  margin-left: 5px;\n  justify-content: center;\n  align-items: center;\n}\n.paladin-vr-cine .paladin-vr-cine-angle .paladin-vr-cine-angle-item-active {\n  background: #7f7f7f;\n  color: #333;\n}\n";
 styleInject$1(css_248z$h);
@@ -42448,11 +42494,16 @@ var DicomToolFlattenMode = /*#__PURE__*/function (_Component) {
           toggleImageMode = _this$props3.toggleImageMode,
           toggleMeasure = _this$props3.toggleMeasure,
           handleFullscreen = _this$props3.handleFullscreen,
-          openDicomModal = _this$props3.openDicomModal;
+          openDicomModal = _this$props3.openDicomModal,
+          operateKeyImages = _this$props3.operateKeyImages;
       var isThree = MPR || VR || Surgery || MIP || CPR; // 非同屏互通模式下
       var IODisconnect = !IO;
-      var commonTools = ['Layout', 'StackScroll', 'Wwwc', 'Zoom', 'Pan', 'Rotate', 'ReverseColor', 'Sharpen', 'Cine', 'FalseColor', 'Link', 'ReferencePosition', 'Reset'];
+      var commonTools = ['Layout', 'StackScroll', 'Wwwc', 'Zoom', 'Pan', 'Rotate', 'ReverseColor', 'Sharpen', 'Cine', 'FalseColor', 'Link', 'ReferencePosition', 'Reset']; // 只有传入了关键图像操作的方法 才显示这个按钮
+      if (operateKeyImages) {
+        commonTools = ['Layout', 'StackScroll', 'Wwwc', 'Zoom', 'Pan', 'Rotate', 'ReverseColor', 'Sharpen', 'Cine', 'FalseColor', 'Link', 'ReferencePosition', 'KeyImages', 'Reset'];
+      }
       if (mode !== 'seriesMode') {
         commonTools = ['Layout', 'Wwwc', 'Zoom', 'Pan', 'Reset', 'Rotate', 'ReverseColor', 'FalseColor'];
@@ -42753,10 +42804,15 @@ var DicomToolFlattenMode$1 = /*#__PURE__*/function (_Component) {
           toggleMeasure = _this$props3.toggleMeasure,
           openDicomModal = _this$props3.openDicomModal,
           handleFullscreen = _this$props3.handleFullscreen,
-          setCustomWindowLayoutType = _this$props3.setCustomWindowLayoutType;
+          setCustomWindowLayoutType = _this$props3.setCustomWindowLayoutType,
+          operateKeyImages = _this$props3.operateKeyImages;
       var isThree = MPR || VR || Surgery || MIP;
       var IODisconnect = !IO;
-      var commonTools = ['Layout', 'StackScroll', 'Wwwc', 'Zoom', 'Pan', 'Rotate', 'ReverseColor', 'Sharpen', 'Cine', 'FalseColor', 'Link', 'ReferencePosition', 'Reset'];
+      var commonTools = ['Layout', 'StackScroll', 'Wwwc', 'Zoom', 'Pan', 'Rotate', 'ReverseColor', 'Sharpen', 'Cine', 'FalseColor', 'Link', 'ReferencePosition', 'Reset']; // 只有传入了关键图像操作的方法 才显示这个按钮
+      if (operateKeyImages) {
+        commonTools = ['Layout', 'StackScroll', 'Wwwc', 'Zoom', 'Pan', 'Rotate', 'ReverseColor', 'Sharpen', 'Cine', 'FalseColor', 'Link', 'ReferencePosition', 'KeyImages', 'Reset'];
+      }
       if (mode !== 'seriesMode') {
         commonTools = ['Layout', 'Wwwc', 'Zoom', 'Pan', 'Reset', 'Rotate', 'ReverseColor', 'FalseColor'];
@@ -43016,19 +43072,19 @@ var LargeToolItem$1 = function LargeToolItem(props) {
   }, _props), children);
 };
-function _extends$1g() { _extends$1g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1g.apply(this, arguments); }
+function _extends$1h() { _extends$1h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1h.apply(this, arguments); }
-var _ref$1e = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1f = /*#__PURE__*/React__default.createElement("path", {
   d: "M.569 3.526c-.504 0-.712-.153-.469-.341L4.11.141a.783.783 0 01.9 0l4.003 3.044c.247.189.039.341-.466.341z",
   opacity: 0.9
 });
-const SvgMenuUp = props => /*#__PURE__*/React__default.createElement("svg", _extends$1g({
+const SvgMenuUp = props => /*#__PURE__*/React__default.createElement("svg", _extends$1h({
   width: 9.117,
   height: 3.526,
   viewBox: "0 0 9.117 3.526",
   fill: "currentColor"
-}, props), _ref$1e);
+}, props), _ref$1f);
 var css_248z$l = ".paladin-mobile-button,\n.paladin-mobile-button-nohover {\n  text-align: center;\n  width: 100%;\n  height: 100%;\n  color: #C9C9C9;\n  cursor: pointer;\n  background: #1D1D1D;\n  box-sizing: border-box;\n}\n.paladin-mobile-button svg,\n.paladin-mobile-button-nohover svg {\n  height: 20px !important;\n}\n.paladin-mobile-more-button,\n.paladin-mobile-more-button-nohover {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 20px;\n  line-height: 20px;\n  justify-content: center;\n  align-items: center;\n  color: #C9C9C9;\n  cursor: pointer;\n  background: #1D1D1D;\n}\n.paladin-tool-mobile-active {\n  border-bottom: 2px solid #F5F5F5;\n  color: #F5F5F5;\n}\n.paladin-mobile-more-active {\n  color: #F5F5F5;\n}\n.paladin-dicomToolItem-text {\n  height: 100%;\n  display: inline-block;\n}\n";
 styleInject$1(css_248z$l);
@@ -43230,19 +43286,19 @@ styleInject$1(css_248z$m);
 var css_248z$n = ".paladin-mobile-scroll-cine {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n.paladin-mobile-scroll-cine svg {\n  height: 16px !important;\n}\n.paladin-mobile-scroll-cine .paladin-mobile-cine-icon {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  width: 40px;\n}\n.paladin-mobile-scroll-cine .paladin-mobile-cine-icon-disabled {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  width: 40px;\n  color: #4D4D4D;\n}\n.paladin-mobile-scroll-cine .paladin-mobile-cine-fps {\n  width: 45px;\n}\n.paladin-mobile-scroll-cine .paladin-mobile-cine-fps .paladin-mobile-cine-fps-text {\n  height: 55px;\n  line-height: 55px;\n  width: 45px;\n  text-align: center;\n}\n.paladin-mobile-scroll-cine .paladin-mobile-scroll-wrapper {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  padding: 0 15px;\n}\n.paladin-slice-range .rc-slider-rail {\n  background-color: #4D4D4D;\n}\n.paladin-slice-range .rc-slider-track {\n  background-color: #4B92EA;\n}\n.paladin-slice-range .rc-slider-handle {\n  background-color: #4B92EA;\n  border-color: #4B92EA;\n  width: 12px;\n  height: 12px;\n  margin-top: -4px;\n  margin-left: -6px;\n}\n.paladin-slice-range-disable .rc-slider-rail {\n  background-color: #4D4D4D;\n}\n.paladin-slice-range-disable .rc-slider-track {\n  background-color: #4D4D4D;\n}\n.paladin-slice-range-disable .rc-slider-handle {\n  background-color: #4D4D4D;\n  border-color: #4D4D4D;\n  width: 12px;\n  height: 12px;\n  margin-top: -4px;\n  margin-left: -6px;\n}\n.paladin-mobile-fps {\n  width: 60px;\n  background: #000;\n  height: 55px;\n  justify-content: center;\n  align-items: center;\n}\n.paladin-mobile-fps .paladin-mobile-fps-item {\n  height: 50%;\n}\n.paladin-mobile-fps .paladin-mobile-fps-item svg {\n  height: 22px !important;\n}\n";
 styleInject$1(css_248z$n);
-function _extends$1h() { _extends$1h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1h.apply(this, arguments); }
+function _extends$1i() { _extends$1i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1i.apply(this, arguments); }
-var _ref$1f = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1g = /*#__PURE__*/React__default.createElement("path", {
   d: "M0 1C0 .114.625-.25 1.391.183l12.435 7.031c.768.434.766 1.14 0 1.573L1.391 15.818C.623 16.252 0 15.887 0 15.001z",
   opacity: 0.997
 });
-const SvgPlay$1 = props => /*#__PURE__*/React__default.createElement("svg", _extends$1h({
+const SvgPlay$1 = props => /*#__PURE__*/React__default.createElement("svg", _extends$1i({
   width: 14.401,
   height: 16,
   viewBox: "0 0 14.401 16",
   fill: "currentColor"
-}, props), _ref$1f);
+}, props), _ref$1g);
 function _createSuper$1e(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1e(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
@@ -43487,41 +43543,41 @@ var ConnectedMobileScrollAndCineTool = reactRedux.connect(mapStateToProps$e, {
 var css_248z$o = ".paladin-mobile-mip-bottom {\n  width: 100%;\n  height: 57px;\n  display: flex;\n  flex-direction: row;\n  background: #1D1D1D;\n}\n.paladin-mobile-mip-bottom .paladin-mobile-mip-icon {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  width: 58px;\n  height: 100%;\n  position: relative;\n}\n.paladin-mobile-mip-bottom .paladin-mobile-mip-bottom-center {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  font-size: 12px;\n  color: #EBEBEB;\n  flex-flow: row;\n}\n.paladin-mobile-mip-bottom .paladin-mobile-mip-bottom-center span {\n  display: inline-block;\n  margin-right: 10px;\n}\n.paladin-mobile-mip-bottom .paladin-mobile-mip-bottom-center svg {\n  width: 20px !important;\n  height: 20px !important;\n}\n.paladin-mobile-mip-bottom .paladin-mobile-mip-angle-text {\n  position: absolute;\n  z-index: 99;\n  font-size: 12px;\n  font-weight: bold;\n  color: #EBEBEB;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(0.8);\n}\n.paladin-mobile-fps {\n  width: 60px;\n  background: #000;\n  height: 55px;\n  justify-content: center;\n  align-items: center;\n}\n.paladin-mobile-fps .paladin-mobile-fps-item {\n  height: 50%;\n}\n.paladin-mobile-fps .paladin-mobile-fps-item svg {\n  height: 22px !important;\n}\n.paladin-mobile-angle-popover {\n  background: #1D1D1D;\n}\n.paladin-mobile-angle-popover .paladin-mobile-angle-option {\n  color: #EBEBEB;\n  padding: 3px 20px;\n}\n";
 styleInject$1(css_248z$o);
-function _extends$1i() { _extends$1i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1i.apply(this, arguments); }
+function _extends$1j() { _extends$1j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1j.apply(this, arguments); }
-var _ref$1g = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1h = /*#__PURE__*/React__default.createElement("path", {
   "data-name": "\\u8054\\u5408 4",
   d: "M10 14.154v-4.89l-8.841 5.66c-.64.41-1.159.065-1.159-.77V.943C0 .107.52-.237 1.159.172L10 5.832V.943c0-.836.521-1.18 1.159-.77L21.52 6.807a.814.814 0 010 1.484l-10.361 6.633a.963.963 0 01-.51.173c-.385.003-.649-.346-.649-.943z",
   fill: "#c9c9c9",
   opacity: 0.997
 });
-const SvgAddFps = props => /*#__PURE__*/React__default.createElement("svg", _extends$1i({
+const SvgAddFps = props => /*#__PURE__*/React__default.createElement("svg", _extends$1j({
   width: 22,
   height: 15.097,
   viewBox: "0 0 22 15.097",
   fill: "currentColor"
-}, props), _ref$1g);
+}, props), _ref$1h);
-function _extends$1j() { _extends$1j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1j.apply(this, arguments); }
+function _extends$1k() { _extends$1k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1k.apply(this, arguments); }
-var _ref$1h = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1i = /*#__PURE__*/React__default.createElement("path", {
   "data-name": "\\u8054\\u5408 4",
   d: "M11.929 14.069V9.206l8.787 5.628c.636.408 1.152.065 1.152-.765V.937c0-.831-.517-1.172-1.152-.766l-8.787 5.626V.937c0-.831-.518-1.172-1.152-.766L.477 6.765a.809.809 0 000 1.475l10.299 6.594a.957.957 0 00.507.172c.385 0 .646-.344.646-.937z",
   fill: "#c8c8c8",
   opacity: 0.997
 });
-const SvgMinusFps = props => /*#__PURE__*/React__default.createElement("svg", _extends$1j({
+const SvgMinusFps = props => /*#__PURE__*/React__default.createElement("svg", _extends$1k({
   width: 21.868,
   height: 15.006,
   viewBox: "0 0 21.868 15.006",
   fill: "currentColor"
-}, props), _ref$1h);
+}, props), _ref$1i);
-function _extends$1k() { _extends$1k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1k.apply(this, arguments); }
+function _extends$1l() { _extends$1l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1l.apply(this, arguments); }
-var _ref$1i = /*#__PURE__*/React__default.createElement("g", {
+var _ref$1j = /*#__PURE__*/React__default.createElement("g", {
   "data-name": "\\u7EC4 4486"
 }, /*#__PURE__*/React__default.createElement("path", {
   d: "M8.209 19.496a8.78 8.78 0 002.32.475l-.155 2.285a11.074 11.074 0 01-2.92-.6zm12.318-2.364L18.605 15.9a8.815 8.815 0 01-1.529 1.808l1.537 1.7a11.243 11.243 0 001.922-2.271zm-.629-4.7a8.769 8.769 0 01-.3 1.31l2.189.674a10.838 10.838 0 00.378-1.655l-2.271-.332zm-4.775 6.613a8.761 8.761 0 01-2.233.772l.453 2.247a11.16 11.16 0 002.816-.977zm-9.021-.624a8.971 8.971 0 01-1.751-1.592l-1.747 1.474a11.236 11.236 0 002.2 2l1.305-1.882zm5.04-18.423A11.147 11.147 0 001.01 15.783l2.081-.956A8.851 8.851 0 0116.48 4.091l-1.684 1.792 6.735 1.678-1.634-6.9-1.782 1.793a11.061 11.061 0 00-6.973-2.456zm0 0",
@@ -43543,16 +43599,16 @@ var _ref$1i = /*#__PURE__*/React__default.createElement("g", {
   r: 0.75
 })));
-const SvgAngle = props => /*#__PURE__*/React__default.createElement("svg", _extends$1k({
+const SvgAngle = props => /*#__PURE__*/React__default.createElement("svg", _extends$1l({
   width: 22.169,
   height: 22.257,
   viewBox: "0 0 22.169 22.257",
   fill: "currentColor"
-}, props), _ref$1i);
+}, props), _ref$1j);
-function _extends$1l() { _extends$1l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1l.apply(this, arguments); }
+function _extends$1m() { _extends$1m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1m.apply(this, arguments); }
-var _ref$1j = /*#__PURE__*/React__default.createElement("g", {
+var _ref$1k = /*#__PURE__*/React__default.createElement("g", {
   "data-name": "\\u7EC4 4494"
 }, /*#__PURE__*/React__default.createElement("g", {
   "data-name": "\\u7EC4 4492"
@@ -43574,16 +43630,16 @@ var _ref$1j = /*#__PURE__*/React__default.createElement("g", {
   fill: "#c8c8c8"
 }));
-const SvgVerticalRotate = props => /*#__PURE__*/React__default.createElement("svg", _extends$1l({
+const SvgVerticalRotate = props => /*#__PURE__*/React__default.createElement("svg", _extends$1m({
   width: 24.567,
   height: 25.027,
   viewBox: "0 0 24.567 25.027",
   fill: "currentColor"
-}, props), _ref$1j);
+}, props), _ref$1k);
-function _extends$1m() { _extends$1m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1m.apply(this, arguments); }
+function _extends$1n() { _extends$1n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1n.apply(this, arguments); }
-var _ref$1k = /*#__PURE__*/React__default.createElement("g", {
+var _ref$1l = /*#__PURE__*/React__default.createElement("g", {
   "data-name": "\\u7EC4 4495"
 }, /*#__PURE__*/React__default.createElement("g", {
   "data-name": "\\u7EC4 4493"
@@ -43603,12 +43659,12 @@ var _ref$1k = /*#__PURE__*/React__default.createElement("g", {
   fill: "#c8c8c8"
 })));
-const SvgHozRotate = props => /*#__PURE__*/React__default.createElement("svg", _extends$1m({
+const SvgHozRotate = props => /*#__PURE__*/React__default.createElement("svg", _extends$1n({
   width: 22.659,
   height: 26.472,
   viewBox: "0 0 22.659 26.472",
   fill: "currentColor"
-}, props), _ref$1k);
+}, props), _ref$1l);
 function _createSuper$1f(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1f(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
@@ -44323,14 +44379,115 @@ var mergeProps$g = function mergeProps(propsFromState, propsFromDispatch, ownPro
 var ConnectedVRClip = reactRedux.connect(mapStateToProps$g, {}, mergeProps$g)(VRClip);
+var css_248z$p = ".paladin-key-image-box {\n  background: #fff;\n  border-radius: 3px;\n}\n.paladin-key-image-box .paladin-key-image-header {\n  font-size: 15px;\n  font-weight: bold;\n  color: #000;\n  padding: 16px 18px;\n}\n.paladin-key-image-box .paladin-key-image-item {\n  min-width: 320px;\n  font-size: 13px;\n  color: #333;\n  padding: 14px 18px;\n}\n.paladin-key-image-box .paladin-key-image-item:nth-child(2n) {\n  background: #f9f9f9;\n}\n.paladin-key-image-box .paladin-key-image-item .paladin-key-image-item-action {\n  text-align: right;\n}\n.paladin-key-image-box .paladin-key-image-item .paladin-key-image-item-action span {\n  display: inline-block;\n  color: #2D78C4;\n}\n.paladin-key-image-box .paladin-key-image-item .paladin-key-image-item-action span:first-child {\n  margin-right: 20px;\n}\n";
+styleInject$1(css_248z$p);
 function _createSuper$1j(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1j(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$1j() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+var KeyImagesTool = /*#__PURE__*/function (_Component) {
+  inherits(KeyImagesTool, _Component);
+  var _super = _createSuper$1j(KeyImagesTool);
+  function KeyImagesTool(props) {
+    classCallCheck(this, KeyImagesTool);
+    return _super.call(this, props);
+  }
+  createClass(KeyImagesTool, [{
+    key: "handlePreview",
+    value: function handlePreview(data) {
+      Modal.create( /*#__PURE__*/React__default.createElement("div", null, data.url ? /*#__PURE__*/React__default.createElement("img", {
+        src: data.url,
+        alt: "preview"
+      }) : '预览错误'), {
+        title: '预览',
+        okText: '关闭',
+        cancelButtonProps: {
+          show: false
+        },
+        style: {
+          textAlign: 'center'
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+      var _this$props = this.props,
+          keyImages = _this$props.keyImages,
+          handleRemove = _this$props.handleRemove;
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: 'paladin-key-image-box'
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: 'paladin-key-image-header'
+      }, "\u5DF2\u9009\u62E9\u7684\u56FE\u50CF\uFF08", keyImages && keyImages.length || 0, "\uFF09"), keyImages && keyImages.map(function (item, i) {
+        return /*#__PURE__*/React__default.createElement(Row, {
+          className: 'paladin-key-image-item',
+          key: 'key-image-' + i
+        }, /*#__PURE__*/React__default.createElement(Col, {
+          xs: 8
+        }, "\u5E8F\u5217\u53F7 (Se:".concat(item.seriesNumber, "/").concat(item.numberOfSeries, ", Im:").concat(item.instanceNumber + 1, "/").concat(item.numberOfInstances, ")")), /*#__PURE__*/React__default.createElement(Col, {
+          xs: 4
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: 'paladin-key-image-item-action'
+        }, /*#__PURE__*/React__default.createElement("span", {
+          onClick: function onClick() {
+            _this.handlePreview(item);
+          }
+        }, "\u9884\u89C8"), /*#__PURE__*/React__default.createElement("span", {
+          onClick: function onClick() {
+            handleRemove(item);
+          }
+        }, "\u5220\u9664"))));
+      }));
+    }
+  }]);
+  return KeyImagesTool;
+}(React.Component);
+function ownKeys$F(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$G(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$F(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var mapStateToProps$h = function mapStateToProps(state) {
+  var keyImages = state.paladin.tools.action.keyImages;
+  var currentSeries = state.paladin.viewport.currentSeries;
+  return {
+    keyImages: keyImages,
+    currentSeries: currentSeries
+  };
+};
+var mergeProps$h = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+  return _objectSpread$G(_objectSpread$G(_objectSpread$G({}, ownProps), propsFromState), {}, {
+    handleRemove: function handleRemove(data) {
+      if (ownProps.operateKeyImages) {
+        ownProps.operateKeyImages('remove', {
+          studyInstanceUID: data.studyInstanceUID,
+          attachmentId: data._id
+        });
+      }
+    }
+  });
+};
+var ConnectedKeyImagesTool = reactRedux.connect(mapStateToProps$h, {}, mergeProps$h)(KeyImagesTool);
+function _createSuper$1k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1k(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct$1k() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var DicomTool = /*#__PURE__*/function (_Component) {
   inherits(DicomTool, _Component);
-  var _super = _createSuper$1j(DicomTool);
+  var _super = _createSuper$1k(DicomTool);
   function DicomTool(props) {
     var _this;
@@ -44972,6 +45129,20 @@ var DicomTool = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           _this.props.rollbackCprPoint();
         }
+      },
+      KeyImages: {
+        label: "关键图",
+        name: "keyImages",
+        tooltip: "关键图像将会打印在报告中",
+        component: /*#__PURE__*/React__default.createElement(SvgKeyImages, null),
+        moreComponent: ConnectedKeyImagesTool,
+        activeWithImageId: true,
+        onClick: function onClick() {
+          _this.props.toggleKeyImages();
+        },
+        customProps: {
+          operateKeyImages: _this.props.operateKeyImages
+        }
       }
     };
     return _this;
@@ -45126,12 +45297,12 @@ function _unsupportedIterableToArray$b(o, minLen) { if (!o) return; if (typeof o
 function _arrayLikeToArray$b(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function ownKeys$F(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$G(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$G(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$F(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$H(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$G(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$G(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var scrollToIndex$3 = cornerstoneTools.scrollToIndex;
-var mapStateToProps$h = function mapStateToProps(state) {
+var mapStateToProps$i = function mapStateToProps(state) {
   var _state$paladin$tools$ = state.paladin.tools.customization,
       tools = _state$paladin$tools$.tools,
       imageModeTools = _state$paladin$tools$.imageModeTools,
@@ -45179,7 +45350,8 @@ var mapStateToProps$h = function mapStateToProps(state) {
       ReferencePosition = _state$paladin$tools$3.ReferencePosition,
       MIP = _state$paladin$tools$3.MIP,
       CPR = _state$paladin$tools$3.CPR,
-      Sharpen = _state$paladin$tools$3.Sharpen;
+      Sharpen = _state$paladin$tools$3.Sharpen,
+      keyImages = _state$paladin$tools$3.keyImages;
   var isMobile = ua.isDeviceTypeMobile();
   var _state$paladin$viewpo = state.paladin.viewport,
       activeIndex = _state$paladin$viewpo.activeIndex,
@@ -45289,11 +45461,12 @@ var mapStateToProps$h = function mapStateToProps(state) {
     ReferencePosition: ReferencePosition,
     MIP: MIP,
     CPR: CPR,
-    Sharpen: Sharpen
+    Sharpen: Sharpen,
+    keyImages: keyImages
   };
 };
-var mergeProps$h = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+var mergeProps$i = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
   // 数据
   var series = propsFromState.series,
       activeIndex = propsFromState.activeIndex,
@@ -45376,7 +45549,7 @@ var mergeProps$h = function mergeProps(propsFromState, propsFromDispatch, ownPro
   };
   var isThree = MPR || VR || MIP || CPR;
-  return _objectSpread$G(_objectSpread$G(_objectSpread$G(_objectSpread$G({}, ownProps), propsFromState), propsFromDispatch), {}, {
+  return _objectSpread$H(_objectSpread$H(_objectSpread$H(_objectSpread$H({}, ownProps), propsFromState), propsFromDispatch), {}, {
     isThree: isThree,
     reset: function reset() {
       // 重置
@@ -46281,11 +46454,45 @@ var mergeProps$h = function mergeProps(propsFromState, propsFromDispatch, ownPro
     handleClearMeasurement: function handleClearMeasurement() {
       var activeElement = getElement(realActiveIndex);
       resetToolState(activeElement, mode);
+    },
+    toggleKeyImages: function toggleKeyImages() {
+      var realSeriesIndex = col * currentScrollLine + activeIndex;
+      var currentSeriesIndex = seriesCurrentIndex[realSeriesIndex];
+      var SOPInstanceUID = currentSeries.SOPInstanceUIDs[currentSeriesIndex];
+      var keyImages = propsFromState.keyImages;
+      var selectImage = lodash$1.find(keyImages, {
+        SOPInstanceUID: SOPInstanceUID
+      });
+      if (selectImage) {
+        ownProps.operateKeyImages('remove', {
+          studyInstanceUID: currentSeries.studyInstanceUID,
+          attachmentId: selectImage._id
+        });
+      } else {
+        var _activeElement = getElement(realActiveIndex);
+        var enabled = cornerstone.getEnabledElement(_activeElement);
+        var imageInfo = {
+          studyInstanceUID: currentSeries.studyInstanceUID,
+          seriesInstanceUID: currentSeries.seriesInstanceUID,
+          SOPInstanceUID: SOPInstanceUID,
+          seriesNumber: currentSeries.seriesNumber,
+          numberOfSeries: currentSeries.seriesCount,
+          numberOfInstances: currentSeries.imageIds.length,
+          instanceNumber: currentSeriesIndex
+        };
+        var dataUrl = enabled.canvas.toDataURL('image/jpeg');
+        ownProps.operateKeyImages('add', {
+          dataUrl: dataUrl,
+          imageInfo: imageInfo
+        });
+      }
     }
   });
 };
-var ConnectedDicomTool = reactRedux.connect(mapStateToProps$h, {
+var ConnectedDicomTool = reactRedux.connect(mapStateToProps$i, {
   setActiveTool: setActiveTool,
   setTools: setTools,
   refreshTools: refreshTools,
@@ -46309,35 +46516,35 @@ var ConnectedDicomTool = reactRedux.connect(mapStateToProps$h, {
   setLastLayout: setLastLayout,
   openGlobalLoading: openGlobalLoading,
   closeGlobalLoading: closeGlobalLoading
-}, mergeProps$h)(DicomTool);
+}, mergeProps$i)(DicomTool);
-var css_248z$p = ".paladin-thumb-content {\n  position: relative;\n  height: 66px;\n  width: 66px;\n  border-width: 1px;\n  border-style: solid;\n  cursor: pointer;\n}\n.paladin-thumb-content .paladin-thumb-bottom {\n  white-space: nowrap;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #faa80a;\n  text-align: center;\n  font-size: 14px;\n  z-index: 2;\n}\n.paladin-thumb-content .paladin-thumb-bottom-mobile {\n  font-size: 10px;\n}\n.paladin-thumb-content .paladin-thumb-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n.paladin-thumb-content .paladin-thumb-process {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  height: 4px;\n  width: 100%;\n  background: #ffffff;\n  overflow: hidden;\n}\n.paladin-thumb-content .paladin-thumb-process .paladin-thumb-process-inner {\n  background: #faa80a;\n  height: 100%;\n}\n.mobile-thumb {\n  width: 50px;\n  height: 50px;\n}\n.paladin-thumb-svg {\n  cursor: pointer;\n  justify-content: center;\n}\n.paladin-thumb-svg svg {\n  fill: #fff;\n}\n.paladin-thumb-svg:hover {\n  background-color: #616772;\n}\n.paladin-thumb-button {\n  cursor: pointer;\n  justify-content: center;\n  padding: 0 15px;\n}\n.paladin-thumb-button svg {\n  fill: #fff;\n}\n.paladin-thumb-button:hover {\n  background-color: #616772;\n}\n.paladin-thumb-button svg {\n  width: 11px !important;\n}\n.paladin-fresh-button {\n  cursor: pointer;\n  justify-content: center;\n  padding: 0 25px;\n}\n.paladin-fresh-button svg {\n  fill: #fff;\n}\n.paladin-fresh-button:hover {\n  background-color: #616772;\n}\n.paladin-fresh-button svg {\n  width: 15px !important;\n}\n.paladin-thumb-study {\n  cursor: pointer;\n  font-size: 14px;\n  line-height: 40px;\n  padding: 0 12px;\n  color: #ffffff;\n}\n.paladin-thumb-viewport {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n.paladin-thumb-viewport h4,\n.paladin-thumb-viewport p {\n  font-size: 10px;\n}\n.paladin-thumb-study-wrapper {\n  border-bottom: 1px solid #727882;\n}\n.paladin-thumb-context-wrapper {\n  padding: 4px 2px;\n}\n";
-styleInject$1(css_248z$p);
+var css_248z$q = ".paladin-thumb-content {\n  position: relative;\n  height: 66px;\n  width: 66px;\n  border-width: 1px;\n  border-style: solid;\n  cursor: pointer;\n}\n.paladin-thumb-content .paladin-thumb-bottom {\n  white-space: nowrap;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #faa80a;\n  text-align: center;\n  font-size: 14px;\n  z-index: 2;\n}\n.paladin-thumb-content .paladin-thumb-bottom-mobile {\n  font-size: 10px;\n}\n.paladin-thumb-content .paladin-thumb-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n.paladin-thumb-content .paladin-thumb-process {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  height: 4px;\n  width: 100%;\n  background: #ffffff;\n  overflow: hidden;\n}\n.paladin-thumb-content .paladin-thumb-process .paladin-thumb-process-inner {\n  background: #faa80a;\n  height: 100%;\n}\n.mobile-thumb {\n  width: 50px;\n  height: 50px;\n}\n.paladin-thumb-svg {\n  cursor: pointer;\n  justify-content: center;\n}\n.paladin-thumb-svg svg {\n  fill: #fff;\n}\n.paladin-thumb-svg:hover {\n  background-color: #616772;\n}\n.paladin-thumb-button {\n  cursor: pointer;\n  justify-content: center;\n  padding: 0 15px;\n}\n.paladin-thumb-button svg {\n  fill: #fff;\n}\n.paladin-thumb-button:hover {\n  background-color: #616772;\n}\n.paladin-thumb-button svg {\n  width: 11px !important;\n}\n.paladin-fresh-button {\n  cursor: pointer;\n  justify-content: center;\n  padding: 0 25px;\n}\n.paladin-fresh-button svg {\n  fill: #fff;\n}\n.paladin-fresh-button:hover {\n  background-color: #616772;\n}\n.paladin-fresh-button svg {\n  width: 15px !important;\n}\n.paladin-thumb-study {\n  cursor: pointer;\n  font-size: 14px;\n  line-height: 40px;\n  padding: 0 12px;\n  color: #ffffff;\n}\n.paladin-thumb-viewport {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n.paladin-thumb-viewport h4,\n.paladin-thumb-viewport p {\n  font-size: 10px;\n}\n.paladin-thumb-study-wrapper {\n  border-bottom: 1px solid #727882;\n}\n.paladin-thumb-context-wrapper {\n  padding: 4px 2px;\n}\n";
+styleInject$1(css_248z$q);
-function _extends$1n() { _extends$1n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1n.apply(this, arguments); }
+function _extends$1o() { _extends$1o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1o.apply(this, arguments); }
-var _ref$1l = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1m = /*#__PURE__*/React__default.createElement("path", {
   d: "M3658.026 10.064c5.915-.329 11.359 2.241 14.432 6.357l-5.498 2.292 14.488 7.78 4.678-15.768-5.437 2.266c-4.491-7.516-13.347-12.235-23.194-11.634-12.153.737-22.056 9.888-23.034 21.285l8.693.746c.612-7.121 7.003-12.847 14.872-13.324zM3661.635 45.864c-6.105.345-11.715-2.402-14.729-6.753l4.887-2.037-13.401-7.196-4.324 14.584 4.657-1.941c4.157 7.321 12.398 12.102 21.752 12.102.558 0 1.121-.017 1.687-.051 12.151-.737 22.054-9.888 23.032-21.285l-8.691-.746c-.615 7.12-7.005 12.846-14.87 13.323z"
 });
-const SvgRefresh$1 = props => /*#__PURE__*/React__default.createElement("svg", _extends$1n({
+const SvgRefresh$1 = props => /*#__PURE__*/React__default.createElement("svg", _extends$1o({
   width: 60,
   height: 56,
   viewBox: "3630 0 60 56",
   fill: "currentColor"
-}, props), _ref$1l);
+}, props), _ref$1m);
-var css_248z$q = ".loadingIndicator {\n  position: absolute;\n  top: 0;\n  background: black;\n  opacity: 1;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.loadingIndicator .lds-ring {\n  color: #999;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  width: 40px;\n  height: 40px;\n  margin: auto;\n}\n.loadingIndicator .lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  border: 4px solid silver;\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: silver transparent transparent transparent;\n}\n.loadingIndicator .lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.loadingIndicator .lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.loadingIndicator .lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loadingIndicator .loadingIndicator-retry {\n  width: 40px;\n  color: #999;\n  margin: 0 auto;\n  font-size: 14px;\n}\n.loadingIndicator .indicatorContents h4 {\n  font-size: 18px;\n  margin: 0 auto 10px 0;\n}\n.loadingIndicator .indicatorContents h5 {\n  font-size: 16px;\n  margin: 0 auto 10px 0;\n}\n.loadingIndicator .indicatorContents p {\n  margin: 4px auto;\n  color: #999;\n  font-size: 14px;\n}\n.loadingIndicator .indicatorContents .loadingIndicator-retry {\n  width: 40px;\n  margin: 20px auto 0 auto;\n}\n.loadingIndicator .indicatorContents-mini h4 {\n  color: #fff;\n  font-size: 12px;\n  margin: 5px 0 5px 0;\n}\n.loadingIndicator .indicatorContents-mini .loadingIndicator-retry {\n  width: 20px;\n  font-size: 12px;\n}\n";
-styleInject$1(css_248z$q);
+var css_248z$r = ".loadingIndicator {\n  position: absolute;\n  top: 0;\n  background: black;\n  opacity: 1;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.loadingIndicator .lds-ring {\n  color: #999;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  width: 40px;\n  height: 40px;\n  margin: auto;\n}\n.loadingIndicator .lds-ring div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  border: 4px solid silver;\n  border-radius: 50%;\n  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: silver transparent transparent transparent;\n}\n.loadingIndicator .lds-ring div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.loadingIndicator .lds-ring div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.loadingIndicator .lds-ring div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes lds-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loadingIndicator .loadingIndicator-retry {\n  width: 40px;\n  color: #999;\n  margin: 0 auto;\n  font-size: 14px;\n}\n.loadingIndicator .indicatorContents h4 {\n  font-size: 18px;\n  margin: 0 auto 10px 0;\n}\n.loadingIndicator .indicatorContents h5 {\n  font-size: 16px;\n  margin: 0 auto 10px 0;\n}\n.loadingIndicator .indicatorContents p {\n  margin: 4px auto;\n  color: #999;\n  font-size: 14px;\n}\n.loadingIndicator .indicatorContents .loadingIndicator-retry {\n  width: 40px;\n  margin: 20px auto 0 auto;\n}\n.loadingIndicator .indicatorContents-mini h4 {\n  color: #fff;\n  font-size: 12px;\n  margin: 5px 0 5px 0;\n}\n.loadingIndicator .indicatorContents-mini .loadingIndicator-retry {\n  width: 20px;\n  font-size: 12px;\n}\n";
+styleInject$1(css_248z$r);
-function _createSuper$1k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1k(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1l(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1k() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1l() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var LoadingIndicator = /*#__PURE__*/function (_PureComponent) {
   inherits(LoadingIndicator, _PureComponent);
-  var _super = _createSuper$1k(LoadingIndicator);
+  var _super = _createSuper$1l(LoadingIndicator);
   function LoadingIndicator() {
     classCallCheck(this, LoadingIndicator);
@@ -46403,9 +46610,9 @@ defineProperty(LoadingIndicator, "defaultProps", {
   error: null
 });
-function _createSuper$1l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1l(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1m(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1m(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1l() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1m() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var loadIndicatorDelay = 300;
 var isMobile$1 = ua.isDeviceTypeMobile();
@@ -46432,7 +46639,7 @@ function initializeTools(cornerstoneTools, tools, element) {
 var ThumbnailViewport = /*#__PURE__*/function (_Component) {
   inherits(ThumbnailViewport, _Component);
-  var _super = _createSuper$1l(ThumbnailViewport);
+  var _super = _createSuper$1m(ThumbnailViewport);
   function ThumbnailViewport(props) {
     var _this;
@@ -46587,9 +46794,9 @@ defineProperty(ThumbnailViewport, "defaultProps", {
   }]
 });
-function _createSuper$1m(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1m(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1n(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1m() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var isMobile$2 = ua.isDeviceTypeMobile();
 var ThumbContent = function ThumbContent(props) {
@@ -46632,7 +46839,7 @@ var ThumbContent = function ThumbContent(props) {
 var DicomThumbnailLayout = /*#__PURE__*/function (_Component) {
   inherits(DicomThumbnailLayout, _Component);
-  var _super = _createSuper$1m(DicomThumbnailLayout);
+  var _super = _createSuper$1n(DicomThumbnailLayout);
   function DicomThumbnailLayout(props) {
     var _this;
@@ -46664,7 +46871,9 @@ var DicomThumbnailLayout = /*#__PURE__*/function (_Component) {
     });
     defineProperty(assertThisInitialized(_this), "handleSelectStudy", function (i) {
-      var thumbnailLoaded = _this.state.thumbnailLoaded;
+      var _this$state = _this.state,
+          thumbnailLoaded = _this$state.thumbnailLoaded,
+          currentStudy = _this$state.currentStudy;
       if (thumbnailLoaded.indexOf(i) < 0) {
         thumbnailLoaded.push(i);
@@ -46673,7 +46882,20 @@ var DicomThumbnailLayout = /*#__PURE__*/function (_Component) {
       _this.setState({
         currentStudy: i,
         thumbnailLoaded: thumbnailLoaded
-      });
+      }); // 暂时移除 后续改进
+      // if (currentStudy !== i) {
+      //     // scrollbar切到选中的检查的位置 viewport选择框选择检查的第一个序列
+      //     let nextSeriesRealIndex = 0;
+      //     if (i > 0) {
+      //         lodash.forEach(this.props.study, (item, index) => {
+      //             if (i > index) {
+      //                 nextSeriesRealIndex += item.series.length
+      //             }
+      //         })
+      //     }
+      //     this.props.scrollPan(nextSeriesRealIndex, i);
+      // }
     });
     _this.scrollRef = null;
@@ -46694,9 +46916,9 @@ var DicomThumbnailLayout = /*#__PURE__*/function (_Component) {
           currentSeriesUID = _this$props.currentSeriesUID,
           study = _this$props.study,
           loaded = _this$props.loaded;
-      var _this$state = this.state,
-          currentStudy = _this$state.currentStudy,
-          thumbnailLoaded = _this$state.thumbnailLoaded;
+      var _this$state2 = this.state,
+          currentStudy = _this$state2.currentStudy,
+          thumbnailLoaded = _this$state2.thumbnailLoaded;
       return /*#__PURE__*/React__default.createElement("div", null, study && study.length > 1 && /*#__PURE__*/React__default.createElement("div", {
         className: "paladin-flex-row paladin-thumb-study-wrapper"
       }, study.map(function (item, i) {
@@ -46774,11 +46996,11 @@ var DicomThumbnailLayout = /*#__PURE__*/function (_Component) {
   return DicomThumbnailLayout;
 }(React.Component);
-function ownKeys$G(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$H(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$H(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$G(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$G(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$I(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$H(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var mapStateToProps$i = function mapStateToProps(state) {
+var mapStateToProps$j = function mapStateToProps(state) {
   var _state$paladin$viewpo = state.paladin.viewport,
       activeIndex = _state$paladin$viewpo.activeIndex,
       currentSeriesUID = _state$paladin$viewpo.currentSeriesUID,
@@ -46799,8 +47021,8 @@ var mapStateToProps$i = function mapStateToProps(state) {
   };
 };
-var mergeProps$i = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
-  return _objectSpread$H(_objectSpread$H(_objectSpread$H({}, ownProps), propsFromState), {}, {
+var mergeProps$j = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+  return _objectSpread$I(_objectSpread$I(_objectSpread$I({}, ownProps), propsFromState), {}, {
     selectThumb: function selectThumb(selectSeriesIndex, currentStudy) {
       /**
        * 选择了缩略图时
@@ -46840,20 +47062,34 @@ var mergeProps$i = function mergeProps(propsFromState, propsFromDispatch, ownPro
       }
       propsFromDispatch.setCurrentSeries(selectSeries);
+    },
+    scrollPan: function scrollPan(value, currentStudyIndex) {
+      var col = propsFromState.col;
+      var _line = lodash$1.ceil((value + 1) / col);
+      var line = _line === 0 ? 0 : _line - 1;
+      propsFromDispatch.setScrollLine(line);
+      var activeIndex = value % col;
+      propsFromDispatch.setActiveIndex(activeIndex);
+      var nextCurrentSeries = ownProps.study[currentStudyIndex].series[activeIndex];
+      propsFromDispatch.setCurrentSeries(nextCurrentSeries);
     }
   });
 };
-var ConnectedDicomThumbnail = reactRedux.connect(mapStateToProps$i, {
+var ConnectedDicomThumbnail = reactRedux.connect(mapStateToProps$j, {
   setSeries: setSeries,
   setCurrentSeries: setCurrentSeries,
   setSeriesCurrentIndex: setSeriesCurrentIndex,
   setImageScrollLine: setImageScrollLine,
-  setImageActiveIndex: setImageActiveIndex
-}, mergeProps$i)(DicomThumbnailLayout);
+  setImageActiveIndex: setImageActiveIndex,
+  setScrollLine: setScrollLine,
+  setActiveIndex: setActiveIndex
+}, mergeProps$j)(DicomThumbnailLayout);
-var css_248z$r = ".paladin-dicom-layout {\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  flex: 1;\n}\n.paladin-dicom-layout-warp {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
-styleInject$1(css_248z$r);
+var css_248z$s = ".paladin-dicom-layout {\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  flex: 1;\n}\n.paladin-dicom-layout-warp {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+styleInject$1(css_248z$s);
 function combineDateAndTimeToMoment(dicom, tag) {
   var date = dicom[tag + 'Date'].toString();
@@ -46906,9 +47142,9 @@ function getPixelSpacing$9(imageId) {
   };
 }
-function _createSuper$1n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1n(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1o(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1o(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1o() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var getCompression = function getCompression(dicom) {
   var lossyImageCompression = dicom.LossyImageCompression.toString(),
@@ -47032,7 +47268,7 @@ var formatDicomInfo = function formatDicomInfo(label, value) {
 var ViewportOverlay = /*#__PURE__*/function (_PureComponent) {
   inherits(ViewportOverlay, _PureComponent);
-  var _super = _createSuper$1n(ViewportOverlay);
+  var _super = _createSuper$1o(ViewportOverlay);
   function ViewportOverlay(props) {
     var _this;
@@ -47262,46 +47498,46 @@ defineProperty(ViewportOverlay, "propTypes", {
   hide: PropTypes$1.bool
 });
-var css_248z$s = ".paladin-custom-scroll {\n  cursor: pointer;\n  background: #333333;\n  position: relative;\n  border-color: #727882;\n  border-style: solid;\n  border-width: 0;\n  box-sizing: border-box;\n}\n.paladin-custom-scroll .paladin-custom-scroll-controller {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.paladin-custom-scroll .paladin-custom-scroll-controller .paladin-custom-scroll-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 16px;\n  width: 16px;\n  background: rgba(91, 91, 91, 0.8);\n}\n.paladin-custom-scroll .paladin-custom-scroll-ctrl-up {\n  width: 16px;\n  height: 20px;\n  background: #5b5b5b;\n  position: absolute;\n  top: 0;\n}\n.paladin-custom-scroll .paladin-custom-scroll-ctrl-up svg {\n  color: #ccc;\n}\n.paladin-custom-scroll .paladin-custom-scroll-ctrl-down {\n  width: 16px;\n  height: 20px;\n  background: #5b5b5b;\n  position: absolute;\n  bottom: 0;\n}\n.paladin-custom-scroll .paladin-custom-scroll-ctrl-down svg {\n  color: #ccc;\n}\n";
-styleInject$1(css_248z$s);
+var css_248z$t = ".paladin-custom-scroll {\n  cursor: pointer;\n  background: #333333;\n  position: relative;\n  border-color: #727882;\n  border-style: solid;\n  border-width: 0;\n  box-sizing: border-box;\n}\n.paladin-custom-scroll .paladin-custom-scroll-controller {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.paladin-custom-scroll .paladin-custom-scroll-controller .paladin-custom-scroll-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 16px;\n  width: 16px;\n  background: rgba(91, 91, 91, 0.8);\n}\n.paladin-custom-scroll .paladin-custom-scroll-ctrl-up {\n  width: 16px;\n  height: 20px;\n  background: #5b5b5b;\n  position: absolute;\n  top: 0;\n}\n.paladin-custom-scroll .paladin-custom-scroll-ctrl-up svg {\n  color: #ccc;\n}\n.paladin-custom-scroll .paladin-custom-scroll-ctrl-down {\n  width: 16px;\n  height: 20px;\n  background: #5b5b5b;\n  position: absolute;\n  bottom: 0;\n}\n.paladin-custom-scroll .paladin-custom-scroll-ctrl-down svg {\n  color: #ccc;\n}\n";
+styleInject$1(css_248z$t);
-function _extends$1o() { _extends$1o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1o.apply(this, arguments); }
+function _extends$1p() { _extends$1p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1p.apply(this, arguments); }
-var _ref$1m = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1n = /*#__PURE__*/React__default.createElement("path", {
   d: "M30.054 23.768l-2.964 2.946q-.339.339-.804.339t-.804-.339L16 17.232l-9.482 9.482q-.339.339-.804.339t-.804-.339l-2.964-2.946q-.339-.339-.339-.813t.339-.813L15.196 8.91q.339-.339.804-.339t.804.339l13.25 13.232q.339.339.339.813t-.339.813z"
 });
-const SvgChevronUp = props => /*#__PURE__*/React__default.createElement("svg", _extends$1o({
+const SvgChevronUp = props => /*#__PURE__*/React__default.createElement("svg", _extends$1p({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$1m);
+}, props), _ref$1n);
-function _extends$1p() { _extends$1p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1p.apply(this, arguments); }
+function _extends$1q() { _extends$1q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1q.apply(this, arguments); }
-var _ref$1n = /*#__PURE__*/React__default.createElement("path", {
+var _ref$1o = /*#__PURE__*/React__default.createElement("path", {
   d: "M30.054 14.429l-13.25 13.232Q16.465 28 16 28t-.804-.339L1.946 14.429q-.339-.339-.339-.813t.339-.813L4.91 9.857q.339-.339.804-.339t.804.339L16 19.339l9.482-9.482q.339-.339.804-.339t.804.339l2.964 2.946q.339.339.339.813t-.339.813z"
 });
-const SvgChevronDown = props => /*#__PURE__*/React__default.createElement("svg", _extends$1p({
+const SvgChevronDown = props => /*#__PURE__*/React__default.createElement("svg", _extends$1q({
   width: 32,
   height: 32,
   viewBox: "0 0 32 32",
   fill: "currentColor"
-}, props), _ref$1n);
+}, props), _ref$1o);
-var css_248z$t = ".paladin-aiTips-wrapper {\n  width: 100%;\n  height: 100%;\n}\n.paladin-aiTips-content {\n  width: 1px;\n  height: 100%;\n  background: #ffff00;\n  position: absolute;\n  top: 0;\n}\n";
-styleInject$1(css_248z$t);
+var css_248z$u = ".paladin-aiTips-wrapper {\n  width: 100%;\n  height: 100%;\n}\n.paladin-aiTips-content {\n  width: 1px;\n  height: 100%;\n  background: #ffff00;\n  position: absolute;\n  top: 0;\n}\n";
+styleInject$1(css_248z$u);
-function _createSuper$1o(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1o(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1p(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1p(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1o() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1p() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var AITips = /*#__PURE__*/function (_Component) {
   inherits(AITips, _Component);
-  var _super = _createSuper$1o(AITips);
+  var _super = _createSuper$1p(AITips);
   function AITips() {
     classCallCheck(this, AITips);
@@ -47338,14 +47574,14 @@ defineProperty(AITips, "propTypes", {
   data: PropTypes$1.any
 });
-function _createSuper$1p(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1p(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1q(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1p() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var CustomScroll = /*#__PURE__*/function (_Component) {
   inherits(CustomScroll, _Component);
-  var _super = _createSuper$1p(CustomScroll);
+  var _super = _createSuper$1q(CustomScroll);
   function CustomScroll(props) {
     var _this;
@@ -47725,8 +47961,8 @@ defineProperty(CustomScroll, "propTypes", {
 });
-var css_248z$u = ".paladin-mpr-direaction-tip {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  z-index: 2;\n  width: 10px;\n  height: 10px;\n}\n.paladin-mpr-direaction-toggle-box {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  z-index: 2;\n  cursor: pointer;\n}\n.paladin-mpr-direaction-toggle-box span {\n  display: inline-block;\n  padding: 3px;\n  font-size: 12px;\n}\n.paladin-mpr-direaction-toggle-box .paladin-mpr-direaction-toggle {\n  border: 1px solid #999;\n  background: #000;\n}\n.paladin-mpr-direaction-toggle-box .paladin-mpr-direaction-toggle:last-child {\n  border-left: none;\n}\n.paladin-mpr-direaction-toggle-box .paladin-mpr-direaction-toggle-active {\n  background: #0d5075;\n}\n.rc-slider {\n  background-color: transparent !important;\n}\n.paladin-viewport-wrapper {\n  overflow: hidden;\n  color: white;\n  height: 100%;\n  position: relative;\n}\n.cornerstone-canvas-container {\n  box-sizing: border-box;\n  width: 100%;\n  position: relative;\n}\n.paladin-viewport-scroll-wrappper {\n  width: 100%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n  z-index: 1;\n  height: 30px;\n}\n.paladin-viewport-scroll-inner {\n  width: 40%;\n  margin: 5px auto auto;\n}\n.paladin-viewport-scroll-mpr-wrappper {\n  width: 100%;\n  position: relative;\n  z-index: 1;\n}\n";
-styleInject$1(css_248z$u);
+var css_248z$v = ".paladin-mpr-direaction-tip {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  z-index: 2;\n  width: 10px;\n  height: 10px;\n}\n.paladin-mpr-direaction-toggle-box {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  z-index: 2;\n  cursor: pointer;\n}\n.paladin-mpr-direaction-toggle-box span {\n  display: inline-block;\n  padding: 3px;\n  font-size: 12px;\n}\n.paladin-mpr-direaction-toggle-box .paladin-mpr-direaction-toggle {\n  border: 1px solid #999;\n  background: #000;\n}\n.paladin-mpr-direaction-toggle-box .paladin-mpr-direaction-toggle:last-child {\n  border-left: none;\n}\n.paladin-mpr-direaction-toggle-box .paladin-mpr-direaction-toggle-active {\n  background: #0d5075;\n}\n.rc-slider {\n  background-color: transparent !important;\n}\n.paladin-viewport-wrapper {\n  overflow: hidden;\n  color: white;\n  height: 100%;\n  position: relative;\n}\n.cornerstone-canvas-container {\n  box-sizing: border-box;\n  width: 100%;\n  position: relative;\n}\n.paladin-viewport-scroll-wrappper {\n  width: 100%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n  z-index: 1;\n  height: 30px;\n}\n.paladin-viewport-scroll-inner {\n  width: 40%;\n  margin: 5px auto auto;\n}\n.paladin-viewport-scroll-mpr-wrappper {\n  width: 100%;\n  position: relative;\n  z-index: 1;\n}\n.paladin-key-image-tip {\n  position: absolute;\n  top: 9px;\n  left: 50%;\n  font-size: 12px;\n  transform: translateX(20px);\n}\n.paladin-key-image-tip svg {\n  display: inline-block;\n  width: 12px !important;\n  height: 12px !important;\n  margin-right: 3px;\n}\n";
+styleInject$1(css_248z$v);
 function _createForOfIteratorHelper$a(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$c(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
@@ -47973,17 +48209,17 @@ function processCentesisPath(imageId) {
   }
 }
-var css_248z$v = ".paladin-thickness-container {\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 90px;\n  height: 16px;\n  background-color: #505050;\n  color: #888;\n  font-size: 13px;\n}\n.paladin-thickness-selecter {\n  padding: 5px 0;\n  background-color: #333;\n  color: #c8c8c8;\n  font-size: 12px;\n}\n.paladin-thickness-selecter .paladin-thickness-select-item {\n  padding: 3px 20px;\n  cursor: pointer;\n}\n.paladin-thickness-selecter .paladin-thickness-select-item:hover {\n  background-color: #fff;\n  color: #000;\n}\n.paladin-thickness-selecter .paladin-thickness-select-mpr {\n  border-bottom: 1px solid #ffffff;\n  padding: 3px 20px 8px 20px;\n}\n";
-styleInject$1(css_248z$v);
+var css_248z$w = ".paladin-thickness-container {\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 90px;\n  height: 16px;\n  background-color: #505050;\n  color: #888;\n  font-size: 13px;\n}\n.paladin-thickness-selecter {\n  padding: 5px 0;\n  background-color: #333;\n  color: #c8c8c8;\n  font-size: 12px;\n}\n.paladin-thickness-selecter .paladin-thickness-select-item {\n  padding: 3px 20px;\n  cursor: pointer;\n}\n.paladin-thickness-selecter .paladin-thickness-select-item:hover {\n  background-color: #fff;\n  color: #000;\n}\n.paladin-thickness-selecter .paladin-thickness-select-mpr {\n  border-bottom: 1px solid #ffffff;\n  padding: 3px 20px 8px 20px;\n}\n";
+styleInject$1(css_248z$w);
-function _createSuper$1q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1q(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1r(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1r(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1r() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var ThicknessSelectMain = /*#__PURE__*/function (_Component) {
   inherits(ThicknessSelectMain, _Component);
-  var _super = _createSuper$1q(ThicknessSelectMain);
+  var _super = _createSuper$1r(ThicknessSelectMain);
   function ThicknessSelectMain(props) {
     var _this;
@@ -48203,13 +48439,13 @@ function newImageIdSpecificToolStateManager() {
 var seriesInstanceUidStateManager = newImageIdSpecificToolStateManager();
-function ownKeys$H(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$I(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$I(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$H(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$J(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$I(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-function _createSuper$1r(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1r(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1s(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1s(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1r() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1s() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var EVENT_RESIZE = 'resize';
 var loadIndicatorDelay$1 = 300;
 var loadHandlerManager$1 = cornerstoneTools.loadHandlerManager;
@@ -48249,7 +48485,7 @@ function initializeTools$1(cornerstoneTools, tools, element) {
 var DicomViewport = /*#__PURE__*/function (_Component) {
   inherits(DicomViewport, _Component);
-  var _super = _createSuper$1r(DicomViewport);
+  var _super = _createSuper$1s(DicomViewport);
   function DicomViewport(_props) {
     var _this;
@@ -49105,7 +49341,8 @@ var DicomViewport = /*#__PURE__*/function (_Component) {
           directionToggle = _this$props4.directionToggle,
           direction = _this$props4.direction,
           CPR = _this$props4.CPR,
-          onClickDomErrorReRenderButton = _this$props4.onClickDomErrorReRenderButton;
+          onClickDomErrorReRenderButton = _this$props4.onClickDomErrorReRenderButton,
+          keyImages = _this$props4.keyImages;
       var active = activeIndex === index;
       var linked = lodash$1.includes(linkedIndexArr, index);
@@ -49117,6 +49354,10 @@ var DicomViewport = /*#__PURE__*/function (_Component) {
       var _imageProcessType = Surgery ? ImageProcessType.Centesis : CPR ? ImageProcessType.CPR : ImageProcessType.MPR;
+      var isKey = keyImages && lodash$1.find(keyImages, {
+        imageId: imageId
+      });
       return /*#__PURE__*/React__default.createElement("div", {
         className: "paladin-viewport-wrapper",
         style: {
@@ -49160,7 +49401,9 @@ var DicomViewport = /*#__PURE__*/function (_Component) {
         sliceThickness: sliceThickness,
         cpr: CPR,
         mpr: mpr
-      })), showCustomScroll && !mpr && scrollType === 'custom' && /*#__PURE__*/React__default.createElement("div", {
+      }), isKey && /*#__PURE__*/React__default.createElement("div", {
+        className: 'paladin-key-image-tip'
+      }, /*#__PURE__*/React__default.createElement(SvgKeyImages, null), /*#__PURE__*/React__default.createElement("span", null, "\u5173\u952E\u56FE\u50CF"))), showCustomScroll && !mpr && scrollType === 'custom' && /*#__PURE__*/React__default.createElement("div", {
         style: {
           width: "".concat(scrollWidth ? scrollWidth : '100%'),
           margin: 'auto'
@@ -49326,7 +49569,7 @@ var DicomViewport = /*#__PURE__*/function (_Component) {
           nextViewport.colormap = undefined;
         }
-        cornerstone.setViewport(this.element, _objectSpread$I(_objectSpread$I({}, nextViewport), {}, {
+        cornerstone.setViewport(this.element, _objectSpread$J(_objectSpread$J({}, nextViewport), {}, {
           displayedArea: defaultViewport.displayedArea
         }));
         this.setState({
@@ -49994,7 +50237,7 @@ defineProperty(DicomViewport, "defaultProps", {
   }]
 });
-var mapStateToProps$j = function mapStateToProps(state) {
+var mapStateToProps$k = function mapStateToProps(state) {
   var _state$paladin$tools$ = state.paladin.tools.action,
       activeTool = _state$paladin$tools$.activeTool,
       ReferenceLines = _state$paladin$tools$.ReferenceLines,
@@ -50007,7 +50250,8 @@ var mapStateToProps$j = function mapStateToProps(state) {
       CentesisEnd = _state$paladin$tools$.CentesisEnd,
       ReferencePosition = _state$paladin$tools$.ReferencePosition,
       CPR = _state$paladin$tools$.CPR,
-      referenceLineType = _state$paladin$tools$.referenceLineType;
+      referenceLineType = _state$paladin$tools$.referenceLineType,
+      keyImages = _state$paladin$tools$.keyImages;
   var _state$paladin$tools$2 = state.paladin.tools.layout,
       col = _state$paladin$tools$2.col,
       currentScrollLine = _state$paladin$tools$2.currentScrollLine,
@@ -50040,17 +50284,18 @@ var mapStateToProps$j = function mapStateToProps(state) {
     positionSynchronizer: positionSynchronizer,
     ReferencePosition: ReferencePosition,
     CPR: CPR,
-    referenceLineType: referenceLineType
+    referenceLineType: referenceLineType,
+    keyImages: keyImages
   };
 };
-var ConnectedDicomViewport = reactRedux.connect(mapStateToProps$j, {
+var ConnectedDicomViewport = reactRedux.connect(mapStateToProps$k, {
   setActiveTool: setActiveTool,
   setSeriesCurrentIndex: setSeriesCurrentIndex
 })(DicomViewport);
-var css_248z$w = ".paladin-dicom-scroll {\n  display: flex;\n  width: 16px;\n  height: 100%;\n  flex-shrink: 0;\n  background: #333333;\n}\n";
-styleInject$1(css_248z$w);
+var css_248z$x = ".paladin-dicom-scroll {\n  display: flex;\n  width: 16px;\n  height: 100%;\n  flex-shrink: 0;\n  background: #333333;\n}\n";
+styleInject$1(css_248z$x);
 var DicomLayoutContainer = function DicomLayoutContainer(props) {
   return /*#__PURE__*/React__default.createElement("div", {
@@ -50065,9 +50310,9 @@ function _unsupportedIterableToArray$e(o, minLen) { if (!o) return; if (typeof o
 function _arrayLikeToArray$e(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _createSuper$1s(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1s(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1t(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1t(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1s() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1t() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var EmptyElement = function EmptyElement(_ref) {
   var col = _ref.col;
@@ -50082,7 +50327,7 @@ var EmptyElement = function EmptyElement(_ref) {
 var DicomLayout = /*#__PURE__*/function (_Component) {
   inherits(DicomLayout, _Component);
-  var _super = _createSuper$1s(DicomLayout);
+  var _super = _createSuper$1t(DicomLayout);
   function DicomLayout(props) {
     var _this;
@@ -50376,15 +50621,15 @@ defineProperty(DicomLayout, "propTypes", {
 });
-function ownKeys$I(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$J(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$J(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$I(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$K(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$J(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * 序列模式
  *
  */
-var mapStateToProps$k = function mapStateToProps(state) {
+var mapStateToProps$l = function mapStateToProps(state) {
   var _state$paladin$viewpo = state.paladin.viewport,
       activeIndex = _state$paladin$viewpo.activeIndex,
       linkSeriesIndex = _state$paladin$viewpo.linkSeriesIndex,
@@ -50418,7 +50663,7 @@ var mapStateToProps$k = function mapStateToProps(state) {
   };
 };
-var mergeProps$j = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+var mergeProps$k = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
   var linkSeriesIndex = propsFromState.linkSeriesIndex,
       linkSynchronizer = propsFromState.linkSynchronizer,
       linkScrollSynchronizer = propsFromState.linkScrollSynchronizer,
@@ -50450,7 +50695,7 @@ var mergeProps$j = function mergeProps(propsFromState, propsFromDispatch, ownPro
   var startIndex = col * currentScrollLine;
   var endIndex = startIndex + col * row;
   var currentLayoutSeries = series.slice(startIndex, endIndex);
-  return _objectSpread$J(_objectSpread$J(_objectSpread$J(_objectSpread$J({}, ownProps), propsFromState), propsFromDispatch), {}, {
+  return _objectSpread$K(_objectSpread$K(_objectSpread$K(_objectSpread$K({}, ownProps), propsFromState), propsFromDispatch), {}, {
     series: currentLayoutSeries,
     seriesTotalCount: series.length,
     row: row,
@@ -50714,7 +50959,7 @@ var mergeProps$j = function mergeProps(propsFromState, propsFromDispatch, ownPro
   });
 };
-var ConnectedDicomLayout = reactRedux.connect(mapStateToProps$k, {
+var ConnectedDicomLayout = reactRedux.connect(mapStateToProps$l, {
   setActiveIndex: setActiveIndex,
   setCurrentSeries: setCurrentSeries,
   setSeries: setSeries,
@@ -50725,17 +50970,17 @@ var ConnectedDicomLayout = reactRedux.connect(mapStateToProps$k, {
   openOnePickLayout: openOnePickLayout,
   closeOnePickLayout: closeOnePickLayout,
   setCineFps: setCineFps
-}, mergeProps$j)(DicomLayout);
+}, mergeProps$k)(DicomLayout);
-function ownKeys$J(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$K(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$K(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$J(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$L(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$K(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$K(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * 图像模式
  *
  */
-var mapStateToProps$l = function mapStateToProps(state) {
+var mapStateToProps$m = function mapStateToProps(state) {
   var _state$paladin$viewpo = state.paladin.viewport,
       imageActiveIndex = _state$paladin$viewpo.imageActiveIndex,
       currentSeries = _state$paladin$viewpo.currentSeries,
@@ -50800,7 +51045,7 @@ var mapDispatchToProps$4 = function mapDispatchToProps(dispatch) {
   };
 };
-var mergeProps$k = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+var mergeProps$l = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
   var currentSeries = propsFromState.currentSeries,
       imageActiveIndex = propsFromState.imageActiveIndex,
       linkImageIndex = propsFromState.linkImageIndex,
@@ -50835,7 +51080,7 @@ var mergeProps$k = function mergeProps(propsFromState, propsFromDispatch, ownPro
     };
   });
   var showVerticalScroll = series && series.length / col > row;
-  return _objectSpread$K(_objectSpread$K(_objectSpread$K(_objectSpread$K({}, ownProps), propsFromState), propsFromDispatch), {}, {
+  return _objectSpread$L(_objectSpread$L(_objectSpread$L(_objectSpread$L({}, ownProps), propsFromState), propsFromDispatch), {}, {
     currentScrollLine: currentScrollLineImage,
     series: series,
     activeIndex: imageActiveIndex,
@@ -50965,19 +51210,19 @@ var mergeProps$k = function mergeProps(propsFromState, propsFromDispatch, ownPro
   });
 };
-var ConnectedDicomImageModeLayout = reactRedux.connect(mapStateToProps$l, mapDispatchToProps$4, mergeProps$k)(DicomLayout);
+var ConnectedDicomImageModeLayout = reactRedux.connect(mapStateToProps$m, mapDispatchToProps$4, mergeProps$l)(DicomLayout);
-var css_248z$x = ".paladin-dicom-layout {\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  flex: 1;\n}\n.paladin-dicom-layout-warp {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
-styleInject$1(css_248z$x);
+var css_248z$y = ".paladin-dicom-layout {\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  flex: 1;\n}\n.paladin-dicom-layout-warp {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+styleInject$1(css_248z$y);
-function _createSuper$1t(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1t(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1u(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1u(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1t() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1u() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var SurgeryLayout = /*#__PURE__*/function (_Component) {
   inherits(SurgeryLayout, _Component);
-  var _super = _createSuper$1t(SurgeryLayout);
+  var _super = _createSuper$1u(SurgeryLayout);
   function SurgeryLayout(props) {
     var _this;
@@ -51634,11 +51879,11 @@ var SurgeryLayout = /*#__PURE__*/function (_Component) {
 defineProperty(SurgeryLayout, "propTypes", {});
-function ownKeys$K(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$L(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$L(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$K(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$K(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$M(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$L(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var mapStateToProps$m = function mapStateToProps(state) {
+var mapStateToProps$n = function mapStateToProps(state) {
   var _state$paladin$viewpo = state.paladin.viewport,
       currentSeries = _state$paladin$viewpo.currentSeries,
       surgeryActiveIndex = _state$paladin$viewpo.surgeryActiveIndex,
@@ -51654,8 +51899,8 @@ var mapStateToProps$m = function mapStateToProps(state) {
   };
 };
-var mergeProps$l = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
-  return _objectSpread$L(_objectSpread$L(_objectSpread$L({}, propsFromState), ownProps), {}, {
+var mergeProps$m = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+  return _objectSpread$M(_objectSpread$M(_objectSpread$M({}, propsFromState), ownProps), {}, {
     onViewPortCellClick: function onViewPortCellClick() {
       propsFromDispatch.setSurgeryActiveIndex.apply(propsFromDispatch, arguments);
     },
@@ -51674,21 +51919,21 @@ var mergeProps$l = function mergeProps(propsFromState, propsFromDispatch, ownPro
   });
 };
-var ConnectedSurgeryLayout = reactRedux.connect(mapStateToProps$m, {
+var ConnectedSurgeryLayout = reactRedux.connect(mapStateToProps$n, {
   setSurgeryActiveIndex: setSurgeryActiveIndex
-}, mergeProps$l)(SurgeryLayout);
+}, mergeProps$m)(SurgeryLayout);
-var css_248z$y = ".paladin-dicom-layout {\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  flex: 1;\n}\n.paladin-dicom-layout-warp {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
-styleInject$1(css_248z$y);
+var css_248z$z = ".paladin-dicom-layout {\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  flex: 1;\n}\n.paladin-dicom-layout-warp {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+styleInject$1(css_248z$z);
-function _createSuper$1u(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1u(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1v(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1u() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1v() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var CPRLayout = /*#__PURE__*/function (_Component) {
   inherits(CPRLayout, _Component);
-  var _super = _createSuper$1u(CPRLayout);
+  var _super = _createSuper$1v(CPRLayout);
   function CPRLayout(props) {
     var _this;
@@ -51976,11 +52221,11 @@ var CPRLayout = /*#__PURE__*/function (_Component) {
 defineProperty(CPRLayout, "propTypes", {});
-function ownKeys$L(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$M(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$M(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$L(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$N(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$M(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var mapStateToProps$n = function mapStateToProps(state) {
+var mapStateToProps$o = function mapStateToProps(state) {
   var _state$paladin$viewpo = state.paladin.viewport,
       currentSeries = _state$paladin$viewpo.currentSeries,
       surgeryActiveIndex = _state$paladin$viewpo.surgeryActiveIndex,
@@ -51994,8 +52239,8 @@ var mapStateToProps$n = function mapStateToProps(state) {
   };
 };
-var mergeProps$m = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
-  return _objectSpread$M(_objectSpread$M(_objectSpread$M({}, propsFromState), ownProps), {}, {
+var mergeProps$n = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+  return _objectSpread$N(_objectSpread$N(_objectSpread$N({}, propsFromState), ownProps), {}, {
     onViewPortCellClick: function onViewPortCellClick() {
       propsFromDispatch.setSurgeryActiveIndex.apply(propsFromDispatch, arguments);
     },
@@ -52008,24 +52253,24 @@ var mergeProps$m = function mergeProps(propsFromState, propsFromDispatch, ownPro
   });
 };
-var ConnectedCPRLayout = reactRedux.connect(mapStateToProps$n, {
+var ConnectedCPRLayout = reactRedux.connect(mapStateToProps$o, {
   setSurgeryActiveIndex: setSurgeryActiveIndex
-}, mergeProps$m)(CPRLayout);
+}, mergeProps$n)(CPRLayout);
-var css_248z$z = ".paladin-main-wrapper svg {\n  width: 100%;\n  height: 100%;\n}\n.paladin-main-wrapper span,\n.paladin-main-wrapper div {\n  user-select: none;\n}\n.paladin-main-wrapper .paladin-dicomView-dicomToolWrapper {\n  background-color: #353535;\n  z-index: 2;\n}\n.paladin-main-wrapper .paladin-dicomView-dicomThumbnailWrapper {\n  background-color: #353535;\n  border: 1px solid #727882;\n}\n.paladin-main-wrapper .paladin-dicomView-mobileWrapper {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 0;\n  background: #1D1D1D;\n  padding-bottom: env(safe-area-inset-bottom);\n}\n.paladin-main-wrapper .paladin-dicomView-pcmobileWrapper {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 0;\n}\nbutton:focus {\n  outline: none;\n}\n.paladin-flex {\n  display: flex;\n}\n.paladin-flex-row {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex: 0 1 auto;\n}\n.paladin-flex-col {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n}\n.paladin-flex-center {\n  justify-content: center;\n  align-items: center;\n}\n.paladin-flex-end {\n  justify-content: flex-end;\n}\n.paladin-flex-1 {\n  flex: 1;\n}\n.paladin-full-content {\n  width: 100%;\n  height: 100%;\n}\n.paladin-full-height {\n  height: 100%;\n}\n.paladin-full-width {\n  width: 100%;\n}\n.paladin-text-center {\n  text-align: center;\n}\n.paladin-global-loading {\n  position: absolute;\n  z-index: 9999;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.55);\n  color: #fff;\n  text-align: center;\n  font-size: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paladin-global-loading .paladin-global-loading-close {\n  position: absolute;\n  z-index: 19999;\n  top: 10px;\n  right: 10px;\n  width: 40px;\n  height: 40px;\n  cursor: pointer;\n}\n.paladin-global-loading .paladin-global-loading-text {\n  margin-bottom: 100px;\n}\n";
-styleInject$1(css_248z$z);
-var css_248z$A = ".image-processing-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  background: black;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  flex-direction: column;\n  z-index: 999;\n}\n.image-processing-container-content {\n  cursor: pointer;\n}\n.image-processing-container-content svg {\n  width: 50px;\n  height: 50px;\n  display: block;\n  margin: 15px auto 0 auto;\n  color: #999;\n}\n.paladin-three-wrapper {\n  width: 100%;\n  height: 100%;\n  color: white;\n  display: flex;\n}\n.paladin-three-horizontal-left {\n  width: 66.6%;\n  height: 100%;\n}\n.paladin-three-horizontal-right {\n  width: 33.4%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.paladin-three-vertical-top {\n  width: 100%;\n  height: 66.6%;\n  flex-direction: row;\n}\n.paladin-three-vertical-bottom {\n  width: 100%;\n  height: 33.4%;\n  display: flex;\n  flex-direction: row;\n}\n.paladin-three-height-55 {\n  width: 100%;\n  height: 55%;\n}\n.paladin-three-height-45 {\n  width: 100%;\n  height: 45%;\n}\n.paladin-three-height-50 {\n  width: 100%;\n  height: 50%;\n}\n.paladin-three-width-50 {\n  width: 50%;\n  height: 100%;\n}\n.paladin-three-height-33 {\n  width: 100%;\n  height: 33.333%;\n}\n.paladin-three-width-33 {\n  height: 100%;\n  width: 33.333%;\n}\n.paladin-three-relative {\n  position: relative;\n}\n.mip-wwwc {\n  position: absolute;\n  bottom: 15px;\n  left: 15px;\n}\n.mip-wwwc p {\n  color: #ffffff;\n  margin: 0;\n  text-align: right;\n}\n";
+var css_248z$A = ".paladin-main-wrapper svg {\n  width: 100%;\n  height: 100%;\n}\n.paladin-main-wrapper span,\n.paladin-main-wrapper div {\n  user-select: none;\n}\n.paladin-main-wrapper .paladin-dicomView-dicomToolWrapper {\n  background-color: #353535;\n  z-index: 2;\n}\n.paladin-main-wrapper .paladin-dicomView-dicomThumbnailWrapper {\n  background-color: #353535;\n  border: 1px solid #727882;\n}\n.paladin-main-wrapper .paladin-dicomView-mobileWrapper {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 0;\n  background: #1D1D1D;\n  padding-bottom: env(safe-area-inset-bottom);\n}\n.paladin-main-wrapper .paladin-dicomView-pcmobileWrapper {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 0;\n}\nbutton:focus {\n  outline: none;\n}\n.paladin-flex {\n  display: flex;\n}\n.paladin-flex-row {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex: 0 1 auto;\n}\n.paladin-flex-col {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n}\n.paladin-flex-center {\n  justify-content: center;\n  align-items: center;\n}\n.paladin-flex-end {\n  justify-content: flex-end;\n}\n.paladin-flex-1 {\n  flex: 1;\n}\n.paladin-full-content {\n  width: 100%;\n  height: 100%;\n}\n.paladin-full-height {\n  height: 100%;\n}\n.paladin-full-width {\n  width: 100%;\n}\n.paladin-text-center {\n  text-align: center;\n}\n.paladin-global-loading {\n  position: absolute;\n  z-index: 9999;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.55);\n  color: #fff;\n  text-align: center;\n  font-size: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paladin-global-loading .paladin-global-loading-close {\n  position: absolute;\n  z-index: 19999;\n  top: 10px;\n  right: 10px;\n  width: 40px;\n  height: 40px;\n  cursor: pointer;\n}\n.paladin-global-loading .paladin-global-loading-text {\n  margin-bottom: 100px;\n}\n";
 styleInject$1(css_248z$A);
-function _createSuper$1v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1v(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+var css_248z$B = ".image-processing-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  background: black;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  flex-direction: column;\n  z-index: 999;\n}\n.image-processing-container-content {\n  cursor: pointer;\n}\n.image-processing-container-content svg {\n  width: 50px;\n  height: 50px;\n  display: block;\n  margin: 15px auto 0 auto;\n  color: #999;\n}\n.paladin-three-wrapper {\n  width: 100%;\n  height: 100%;\n  color: white;\n  display: flex;\n}\n.paladin-three-horizontal-left {\n  width: 66.6%;\n  height: 100%;\n}\n.paladin-three-horizontal-right {\n  width: 33.4%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.paladin-three-vertical-top {\n  width: 100%;\n  height: 66.6%;\n  flex-direction: row;\n}\n.paladin-three-vertical-bottom {\n  width: 100%;\n  height: 33.4%;\n  display: flex;\n  flex-direction: row;\n}\n.paladin-three-height-55 {\n  width: 100%;\n  height: 55%;\n}\n.paladin-three-height-45 {\n  width: 100%;\n  height: 45%;\n}\n.paladin-three-height-50 {\n  width: 100%;\n  height: 50%;\n}\n.paladin-three-width-50 {\n  width: 50%;\n  height: 100%;\n}\n.paladin-three-height-33 {\n  width: 100%;\n  height: 33.333%;\n}\n.paladin-three-width-33 {\n  height: 100%;\n  width: 33.333%;\n}\n.paladin-three-relative {\n  position: relative;\n}\n.mip-wwwc {\n  position: absolute;\n  bottom: 15px;\n  left: 15px;\n}\n.mip-wwwc p {\n  color: #ffffff;\n  margin: 0;\n  text-align: right;\n}\n";
+styleInject$1(css_248z$B);
-function _isNativeReflectConstruct$1v() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _createSuper$1w(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1w(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct$1w() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var ThreeDLayout = /*#__PURE__*/function (_Component) {
   inherits(ThreeDLayout, _Component);
-  var _super = _createSuper$1v(ThreeDLayout);
+  var _super = _createSuper$1w(ThreeDLayout);
   function ThreeDLayout(props) {
     var _this;
@@ -52434,11 +52679,11 @@ var ThreeDLayout = /*#__PURE__*/function (_Component) {
 defineProperty(ThreeDLayout, "propTypes", {});
-function ownKeys$M(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$N(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$N(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$M(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$O(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$N(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var mapStateToProps$o = function mapStateToProps(state) {
+var mapStateToProps$p = function mapStateToProps(state) {
   var _state$paladin$viewpo = state.paladin.viewport,
       currentSeries = _state$paladin$viewpo.currentSeries,
       mprActiveIndex = _state$paladin$viewpo.mprActiveIndex,
@@ -52454,8 +52699,8 @@ var mapStateToProps$o = function mapStateToProps(state) {
   };
 };
-var mergeProps$n = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
-  return _objectSpread$N(_objectSpread$N(_objectSpread$N({}, propsFromState), ownProps), {}, {
+var mergeProps$o = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+  return _objectSpread$O(_objectSpread$O(_objectSpread$O({}, propsFromState), ownProps), {}, {
     onViewPortCellClick: function onViewPortCellClick() {
       propsFromDispatch.setMprActiveIndex.apply(propsFromDispatch, arguments);
     },
@@ -52471,9 +52716,9 @@ var mergeProps$n = function mergeProps(propsFromState, propsFromDispatch, ownPro
   });
 };
-var ConnectedMPRLayout = reactRedux.connect(mapStateToProps$o, {
+var ConnectedMPRLayout = reactRedux.connect(mapStateToProps$p, {
   setMprActiveIndex: setMprActiveIndex
-}, mergeProps$n)(ThreeDLayout);
+}, mergeProps$o)(ThreeDLayout);
 function _createForOfIteratorHelper$d(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$f(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
@@ -52481,14 +52726,14 @@ function _unsupportedIterableToArray$f(o, minLen) { if (!o) return; if (typeof o
 function _arrayLikeToArray$f(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _createSuper$1w(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1w(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1x(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1x(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1w() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1x() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var ThreeDLayout$1 = /*#__PURE__*/function (_Component) {
   inherits(ThreeDLayout, _Component);
-  var _super = _createSuper$1w(ThreeDLayout);
+  var _super = _createSuper$1x(ThreeDLayout);
   function ThreeDLayout(props) {
     var _this;
@@ -52758,31 +53003,31 @@ var ThreeDLayout$1 = /*#__PURE__*/function (_Component) {
 defineProperty(ThreeDLayout$1, "propTypes", {});
-function ownKeys$N(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$O(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$O(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$N(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$P(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$O(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var mapStateToProps$p = function mapStateToProps(state) {
+var mapStateToProps$q = function mapStateToProps(state) {
   var currentSeries = state.paladin.viewport.currentSeries;
   return {
     currentSeries: currentSeries
   };
 };
-var mergeProps$o = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
-  return _objectSpread$O(_objectSpread$O({}, propsFromState), ownProps);
+var mergeProps$p = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+  return _objectSpread$P(_objectSpread$P({}, propsFromState), ownProps);
 };
-var ConnectedVR = reactRedux.connect(mapStateToProps$p, {}, mergeProps$o)(ThreeDLayout$1);
+var ConnectedVR = reactRedux.connect(mapStateToProps$q, {}, mergeProps$p)(ThreeDLayout$1);
-function _createSuper$1x(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1x(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1y(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1y(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1x() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1y() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var MIPLayout = /*#__PURE__*/function (_Component) {
   inherits(MIPLayout, _Component);
-  var _super = _createSuper$1x(MIPLayout);
+  var _super = _createSuper$1y(MIPLayout);
   function MIPLayout(props) {
     var _this;
@@ -53000,24 +53245,24 @@ var MIPLayout = /*#__PURE__*/function (_Component) {
 defineProperty(MIPLayout, "propTypes", {});
-function ownKeys$O(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$P(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$P(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$O(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$Q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$P(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$P(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var mapStateToProps$q = function mapStateToProps(state) {
+var mapStateToProps$r = function mapStateToProps(state) {
   var currentSeries = state.paladin.viewport.currentSeries;
   return {
     currentSeries: currentSeries
   };
 };
-var mergeProps$p = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
-  return _objectSpread$P(_objectSpread$P(_objectSpread$P({}, propsFromState), propsFromDispatch), ownProps);
+var mergeProps$q = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+  return _objectSpread$Q(_objectSpread$Q(_objectSpread$Q({}, propsFromState), propsFromDispatch), ownProps);
 };
-var ConnectedMIP = reactRedux.connect(mapStateToProps$q, {
+var ConnectedMIP = reactRedux.connect(mapStateToProps$r, {
   set3DActiveTool: set3DActiveTool
-}, mergeProps$p)(MIPLayout);
+}, mergeProps$q)(MIPLayout);
 function colorMapFix(viewportData) {
   viewportData.imageViewports = lodash$1.map(viewportData.imageViewports, function (seriesViewportArr) {
@@ -53032,15 +53277,15 @@ function colorMapFix(viewportData) {
   return viewportData;
 }
-function ownKeys$P(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$Q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$Q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$P(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$P(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$R(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$Q(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * 全部模式
  *
  */
-var mapStateToProps$r = function mapStateToProps(state) {
+var mapStateToProps$s = function mapStateToProps(state) {
   var _state$paladin$viewpo = state.paladin.viewport,
       imageActiveIndex = _state$paladin$viewpo.imageActiveIndex,
       linkImageIndex = _state$paladin$viewpo.linkImageIndex,
@@ -53103,7 +53348,7 @@ var mapDispatchToProps$5 = function mapDispatchToProps(dispatch) {
   };
 };
-var mergeProps$q = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+var mergeProps$r = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
   var imageActiveIndex = propsFromState.imageActiveIndex,
       linkImageIndex = propsFromState.linkImageIndex,
       activeIndex = propsFromState.activeIndex,
@@ -53139,7 +53384,7 @@ var mergeProps$q = function mergeProps(propsFromState, propsFromDispatch, ownPro
   var endIndex = startIndex + onePageCount;
   var series = allSeries.slice(startIndex, endIndex);
   var showVerticalScroll = series && series.length / col > row;
-  return _objectSpread$Q(_objectSpread$Q(_objectSpread$Q(_objectSpread$Q({}, ownProps), propsFromState), propsFromDispatch), {}, {
+  return _objectSpread$R(_objectSpread$R(_objectSpread$R(_objectSpread$R({}, ownProps), propsFromState), propsFromDispatch), {}, {
     currentScrollLine: currentScrollLineImage,
     series: series,
     activeIndex: imageActiveIndex,
@@ -53253,7 +53498,7 @@ var mergeProps$q = function mergeProps(propsFromState, propsFromDispatch, ownPro
   });
 };
-var ConnectedDicomAllImageModeLayout = reactRedux.connect(mapStateToProps$r, mapDispatchToProps$5, mergeProps$q)(DicomLayout);
+var ConnectedDicomAllImageModeLayout = reactRedux.connect(mapStateToProps$s, mapDispatchToProps$5, mergeProps$r)(DicomLayout);
 function _createForOfIteratorHelper$e(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$g(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
@@ -53261,9 +53506,9 @@ function _unsupportedIterableToArray$g(o, minLen) { if (!o) return; if (typeof o
 function _arrayLikeToArray$g(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _createSuper$1y(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1y(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+function _createSuper$1z(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1z(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1y() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1z() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var DicomLayoutContainerWrap = function DicomLayoutContainerWrap(props) {
   return /*#__PURE__*/React__default.createElement("div", {
@@ -53311,7 +53556,7 @@ index$2.configure({
 var DicomView = /*#__PURE__*/function (_Component) {
   inherits(DicomView, _Component);
-  var _super = _createSuper$1y(DicomView);
+  var _super = _createSuper$1z(DicomView);
   function DicomView(props) {
     var _this;
@@ -53435,6 +53680,10 @@ var DicomView = /*#__PURE__*/function (_Component) {
           windowLayoutType: nextProps.windowLayoutType
         });
       }
+      if (JSON.stringify(nextProps.keyImages) !== JSON.stringify(this.props.keyImages)) {
+        this.props.resetKeyImages(nextProps.keyImages);
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -53799,7 +54048,8 @@ var DicomView = /*#__PURE__*/function (_Component) {
         changeWindowSet: this.props.changeWindowSet,
         study: this.state.study,
         windowLayoutType: this.state.windowLayoutType,
-        setCustomWindowLayoutType: this.setCustomWindowLayoutType
+        setCustomWindowLayoutType: this.setCustomWindowLayoutType,
+        operateKeyImages: this.props.operateKeyImages
       }));
       var DicomLayout = /*#__PURE__*/React__default.createElement(DicomLayoutContainerWrap, null, viewMode === '2D' && this.props.mode === 'seriesMode' && /*#__PURE__*/React__default.createElement(ConnectedDicomLayout, {
         series: this.props.series,
@@ -53901,13 +54151,13 @@ function _unsupportedIterableToArray$h(o, minLen) { if (!o) return; if (typeof o
 function _arrayLikeToArray$h(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function ownKeys$Q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$R(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$R(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$Q(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$S(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$R(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$R(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var scroll$1 = cornerstoneTools.importInternal('util/scroll');
 var throttle$9 = cornerstoneTools.importInternal('util/throttle');
-var mapStateToProps$s = function mapStateToProps(state) {
+var mapStateToProps$t = function mapStateToProps(state) {
   var _state$paladin$viewpo = state.paladin.viewport,
       activeIndex = _state$paladin$viewpo.activeIndex,
       imageActiveIndex = _state$paladin$viewpo.imageActiveIndex,
@@ -53974,7 +54224,7 @@ var mapStateToProps$s = function mapStateToProps(state) {
   };
 };
-var mergeProps$r = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
+var mergeProps$s = function mergeProps(propsFromState, propsFromDispatch, ownProps) {
   var activeIndex = propsFromState.activeIndex,
       imageActiveIndex = propsFromState.imageActiveIndex,
       MPR = propsFromState.MPR,
@@ -54064,7 +54314,7 @@ var mergeProps$r = function mergeProps(propsFromState, propsFromDispatch, ownPro
    *
    */
-  return _objectSpread$R(_objectSpread$R(_objectSpread$R({}, ownProps), propsFromState), {}, {
+  return _objectSpread$S(_objectSpread$S(_objectSpread$S({}, ownProps), propsFromState), {}, {
     showDicomThumbnail: showDicomThumbnail,
     viewMode: viewMode,
     keyMap: {
@@ -54484,7 +54734,7 @@ var mergeProps$r = function mergeProps(propsFromState, propsFromDispatch, ownPro
                     imageIds.push(imageId);
                   }
-                  series[i] = _objectSpread$R(_objectSpread$R({}, item), {}, {
+                  series[i] = _objectSpread$S(_objectSpread$S({}, item), {}, {
                     imageIds: imageIds,
                     numberOfSeriesRelatedInstances: numFrames,
                     isMultiFrame: true
@@ -54549,7 +54799,7 @@ var mergeProps$r = function mergeProps(propsFromState, propsFromDispatch, ownPro
                 callback && callback({
                   hasChange: hasMultiFrame,
-                  study: [_objectSpread$R(_objectSpread$R({}, ownProps.study[0]), {}, {
+                  study: [_objectSpread$S(_objectSpread$S({}, ownProps.study[0]), {}, {
                     series: series
                   })]
                 }); // 如果有frameTime的话设置fps
@@ -54620,11 +54870,24 @@ var mergeProps$r = function mergeProps(propsFromState, propsFromDispatch, ownPro
           }
         }
       });
+    },
+    resetKeyImages: function resetKeyImages(data) {
+      var _images = [];
+      if (data.images && data.images.length > 0) {
+        lodash$1.forEach(data.images, function (image) {
+          _images.push(_objectSpread$S(_objectSpread$S({}, image), {}, {
+            studyInstanceUID: data.studyInstanceUID
+          }));
+        });
+      }
+      propsFromDispatch.setKeyImage(_images);
     }
   });
 };
-var ConnectedDicomView = reactRedux.connect(mapStateToProps$s, {
+var ConnectedDicomView = reactRedux.connect(mapStateToProps$t, {
   initSeries: initSeries,
   addSeries: addSeries,
   setCurrentSeries: setCurrentSeries,
@@ -54645,8 +54908,9 @@ var ConnectedDicomView = reactRedux.connect(mapStateToProps$s, {
   closeIO: closeIO,
   setActiveTool: setActiveTool,
   setCineFps: setCineFps,
-  closeGlobalLoading: closeGlobalLoading
-}, mergeProps$r, withRef())(DicomView);
+  closeGlobalLoading: closeGlobalLoading,
+  setKeyImage: setKeyImage
+}, mergeProps$s, withRef())(DicomView);
 function withRef() {
   var reactReduxVersion = package_json.version.split('.')[0];