@aics/vole-app 2.14.0 → 3.1.1
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.
- package/es/Globals.d.js +0 -0
- package/es/aics-image-viewer/components/App/ChannelUpdater.js +21 -3
- package/es/aics-image-viewer/components/App/index.js +184 -198
- package/es/aics-image-viewer/components/CellViewerCanvasWrapper/index.js +10 -9
- package/es/aics-image-viewer/components/ChannelsWidget.js +35 -22
- package/es/aics-image-viewer/components/ChannelsWidgetRow/index.js +26 -52
- package/es/aics-image-viewer/components/ChannelsWidgetRow/styles.css +0 -6
- package/es/aics-image-viewer/components/ColorPicker.js +1 -1
- package/es/aics-image-viewer/components/ControlPanel/index.js +5 -4
- package/es/aics-image-viewer/components/CustomizeWidget.js +12 -8
- package/es/aics-image-viewer/components/ErrorAlert/index.js +4 -4
- package/es/aics-image-viewer/components/GlobalVolumeControls.js +15 -12
- package/es/aics-image-viewer/components/StyleProvider/index.js +4 -2
- package/es/aics-image-viewer/components/TfEditor/index.js +304 -154
- package/es/aics-image-viewer/components/TfEditor/styles.css +53 -31
- package/es/aics-image-viewer/components/Toolbar/DownloadButton.js +1 -1
- package/es/aics-image-viewer/components/Toolbar/index.js +18 -16
- package/es/aics-image-viewer/components/shared/SharedCheckBox.js +1 -1
- package/es/aics-image-viewer/components/shared/SliderRow/index.js +8 -3
- package/es/aics-image-viewer/components/shared/SliderRow/styles.css +7 -0
- package/es/aics-image-viewer/components/shared/SmarterSlider.js +1 -1
- package/es/aics-image-viewer/components/shared/ViewerIcon.js +1 -1
- package/es/aics-image-viewer/components/useVolume.js +59 -58
- package/es/aics-image-viewer/shared/constants.js +2 -2
- package/es/aics-image-viewer/shared/utils/controlPointsToLut.js +57 -24
- package/es/aics-image-viewer/shared/utils/sceneStore.js +5 -3
- package/es/aics-image-viewer/shared/utils/storage.js +238 -0
- package/es/aics-image-viewer/shared/utils/test/storage.test.js +264 -0
- package/es/aics-image-viewer/shared/utils/test/urlParsing.test.js +240 -108
- package/es/aics-image-viewer/shared/utils/test/viewerChannelSettings.test.js +1 -1
- package/es/aics-image-viewer/shared/utils/urlParsing.js +278 -153
- package/es/aics-image-viewer/shared/utils/viewerState.js +4 -24
- package/es/aics-image-viewer/state/reset.js +111 -0
- package/es/aics-image-viewer/state/store.js +90 -0
- package/es/aics-image-viewer/state/subscribers.js +153 -0
- package/es/aics-image-viewer/state/test/reset.test.js +247 -0
- package/es/aics-image-viewer/state/util.js +71 -0
- package/es/index.js +3 -3
- package/package.json +18 -11
- package/type-declarations/aics-image-viewer/components/App/ChannelUpdater.d.ts +2 -4
- package/type-declarations/aics-image-viewer/components/App/types.d.ts +3 -3
- package/type-declarations/aics-image-viewer/components/AxisClipSliders/index.d.ts +6 -6
- package/type-declarations/aics-image-viewer/components/CellViewerCanvasWrapper/index.d.ts +5 -14
- package/type-declarations/aics-image-viewer/components/ChannelsWidget.d.ts +3 -6
- package/type-declarations/aics-image-viewer/components/ChannelsWidgetRow/index.d.ts +3 -6
- package/type-declarations/aics-image-viewer/components/ColorPicker.d.ts +1 -1
- package/type-declarations/aics-image-viewer/components/ControlPanel/index.d.ts +6 -7
- package/type-declarations/aics-image-viewer/components/CustomizeWidget.d.ts +2 -8
- package/type-declarations/aics-image-viewer/components/ErrorAlert/index.d.ts +4 -0
- package/type-declarations/aics-image-viewer/components/GlobalVolumeControls.d.ts +2 -9
- package/type-declarations/aics-image-viewer/components/MetadataViewer/index.d.ts +1 -1
- package/type-declarations/aics-image-viewer/components/StyleProvider/index.d.ts +1 -1
- package/type-declarations/aics-image-viewer/components/TfEditor/index.d.ts +10 -3
- package/type-declarations/aics-image-viewer/components/Toolbar/index.d.ts +3 -12
- package/type-declarations/aics-image-viewer/components/shared/SliderRow/index.d.ts +2 -1
- package/type-declarations/aics-image-viewer/components/shared/SmarterSlider.d.ts +1 -1
- package/type-declarations/aics-image-viewer/components/shared/ViewerIcon.d.ts +1 -1
- package/type-declarations/aics-image-viewer/components/useVolume.d.ts +7 -4
- package/type-declarations/aics-image-viewer/shared/constants.d.ts +5 -5
- package/type-declarations/aics-image-viewer/shared/types.d.ts +1 -1
- package/type-declarations/aics-image-viewer/shared/utils/controlPointsToLut.d.ts +9 -5
- package/type-declarations/aics-image-viewer/shared/utils/firebase/index.d.ts +1 -1
- package/type-declarations/aics-image-viewer/shared/utils/hooks.d.ts +1 -1
- package/type-declarations/aics-image-viewer/shared/utils/playControls.d.ts +1 -1
- package/type-declarations/aics-image-viewer/shared/utils/sceneStore.d.ts +8 -4
- package/type-declarations/aics-image-viewer/shared/utils/storage.d.ts +15 -0
- package/type-declarations/aics-image-viewer/shared/utils/urlParsing.d.ts +94 -31
- package/type-declarations/aics-image-viewer/shared/utils/viewerChannelSettings.d.ts +39 -1
- package/type-declarations/aics-image-viewer/shared/utils/viewerState.d.ts +3 -6
- package/type-declarations/aics-image-viewer/state/reset.d.ts +29 -0
- package/type-declarations/aics-image-viewer/state/store.d.ts +30 -0
- package/type-declarations/aics-image-viewer/state/subscribers.d.ts +4 -0
- package/type-declarations/aics-image-viewer/state/types.d.ts +46 -0
- package/type-declarations/aics-image-viewer/state/util.d.ts +8 -0
- package/type-declarations/index.d.ts +4 -4
- package/es/aics-image-viewer/components/ViewerStateProvider/ResetStateProvider.js +0 -163
- package/es/aics-image-viewer/components/ViewerStateProvider/index.js +0 -259
- package/type-declarations/aics-image-viewer/components/ViewerStateProvider/ResetStateProvider.d.ts +0 -34
- package/type-declarations/aics-image-viewer/components/ViewerStateProvider/index.d.ts +0 -33
- package/type-declarations/aics-image-viewer/components/ViewerStateProvider/types.d.ts +0 -107
- /package/es/aics-image-viewer/{components/ViewerStateProvider → state}/types.js +0 -0
|
@@ -1,259 +0,0 @@
|
|
|
1
|
-
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
2
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
5
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
6
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
7
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
8
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
11
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
12
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
14
|
-
import { isEqual } from "lodash";
|
|
15
|
-
import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
|
|
16
|
-
import { getDefaultViewerChannelSettings, getDefaultViewerState } from "../../shared/constants";
|
|
17
|
-
import { RenderMode, ViewMode } from "../../shared/enums";
|
|
18
|
-
import { useConstructor } from "../../shared/utils/hooks";
|
|
19
|
-
import ResetStateProvider from "./ResetStateProvider";
|
|
20
|
-
var isObject = function isObject(val) {
|
|
21
|
-
return _typeof(val) === "object" && val !== null && !Array.isArray(val);
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
// Some viewer settings require custom change behaviors to change related settings simultaneously or guard against
|
|
25
|
-
// entering an illegal state (e.g. autorotate must not be on in pathtrace mode). Those behaviors are defined here.
|
|
26
|
-
var VIEWER_SETTINGS_CHANGE_HANDLERS = {
|
|
27
|
-
// View mode: if we're switching to 2d, switch to volumetric rendering
|
|
28
|
-
viewMode: function viewMode(prevSettings, _viewMode) {
|
|
29
|
-
var switchToVolumetric = _viewMode !== ViewMode.threeD && prevSettings.renderMode === RenderMode.pathTrace;
|
|
30
|
-
return _objectSpread(_objectSpread({}, prevSettings), {}, {
|
|
31
|
-
viewMode: _viewMode,
|
|
32
|
-
renderMode: switchToVolumetric ? RenderMode.volumetric : prevSettings.renderMode
|
|
33
|
-
});
|
|
34
|
-
},
|
|
35
|
-
// Render mode: if we're switching to pathtrace, turn off autorotate
|
|
36
|
-
// Also, do not allow pathtrace mode in any mode other than 3D.
|
|
37
|
-
renderMode: function renderMode(prevSettings, _renderMode) {
|
|
38
|
-
if (_renderMode === RenderMode.pathTrace && prevSettings.viewMode !== ViewMode.threeD) {
|
|
39
|
-
return _objectSpread({}, prevSettings);
|
|
40
|
-
}
|
|
41
|
-
return _objectSpread(_objectSpread({}, prevSettings), {}, {
|
|
42
|
-
renderMode: _renderMode,
|
|
43
|
-
autorotate: _renderMode === RenderMode.pathTrace ? false : prevSettings.autorotate
|
|
44
|
-
});
|
|
45
|
-
},
|
|
46
|
-
// Autorotate: do not enable autorotate while in pathtrace mode
|
|
47
|
-
autorotate: function autorotate(prevSettings, _autorotate) {
|
|
48
|
-
return _objectSpread(_objectSpread({}, prevSettings), {}, {
|
|
49
|
-
// The button should theoretically be unclickable while in pathtrace mode, but this provides extra security
|
|
50
|
-
autorotate: prevSettings.renderMode === RenderMode.pathTrace ? false : _autorotate
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
var viewerSettingsReducer = function viewerSettingsReducer(viewerSettings, _ref) {
|
|
55
|
-
var key = _ref.key,
|
|
56
|
-
value = _ref.value;
|
|
57
|
-
var changeHandler = VIEWER_SETTINGS_CHANGE_HANDLERS[key];
|
|
58
|
-
if (changeHandler) {
|
|
59
|
-
// This setting has a custom change handler. Let it handle creating a new state object.
|
|
60
|
-
return changeHandler(viewerSettings, value);
|
|
61
|
-
} else {
|
|
62
|
-
var setting = viewerSettings[key];
|
|
63
|
-
if (isObject(setting) && isObject(value)) {
|
|
64
|
-
// This setting is an object, and we may be updating it with a partial object.
|
|
65
|
-
return _objectSpread(_objectSpread({}, viewerSettings), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, setting), value)));
|
|
66
|
-
} else {
|
|
67
|
-
// This setting is regular. Update it the regular way.
|
|
68
|
-
return _objectSpread(_objectSpread({}, viewerSettings), {}, _defineProperty({}, key, value));
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
var ChannelSettingActionType = /*#__PURE__*/function (ChannelSettingActionType) {
|
|
73
|
-
ChannelSettingActionType["UniformUpdate"] = "UniformUpdate";
|
|
74
|
-
ChannelSettingActionType["ArrayUpdate"] = "ArrayUpdate";
|
|
75
|
-
ChannelSettingActionType["Init"] = "Init";
|
|
76
|
-
return ChannelSettingActionType;
|
|
77
|
-
}(ChannelSettingActionType || {});
|
|
78
|
-
/** Set channel setting `key` on one or more channels specified by `index` to value `value`. */
|
|
79
|
-
/** Set the values of channel setting `key` for all channels from an array of values ordered by channel index */
|
|
80
|
-
/** Initialize list of channel states */
|
|
81
|
-
var channelSettingsReducer = function channelSettingsReducer(channelSettings, action) {
|
|
82
|
-
if (action.type === ChannelSettingActionType.Init) {
|
|
83
|
-
// ChannelSettingInitAction
|
|
84
|
-
return action.value;
|
|
85
|
-
} else if (action.type === ChannelSettingActionType.ArrayUpdate) {
|
|
86
|
-
// ChannelSettingArrayUpdateAction
|
|
87
|
-
return channelSettings.map(function (channel, idx) {
|
|
88
|
-
return action.value[idx] ? _objectSpread(_objectSpread({}, channel), {}, _defineProperty({}, action.key, action.value[idx])) : channel;
|
|
89
|
-
});
|
|
90
|
-
} else {
|
|
91
|
-
// type is ChannelSettingActionType.UniformUpdate
|
|
92
|
-
if (Array.isArray(action.index)) {
|
|
93
|
-
// ChannelSettingUniformUpdateAction on potentially multiple channels
|
|
94
|
-
return channelSettings.map(function (channel, idx) {
|
|
95
|
-
return action.index.includes(idx) ? _objectSpread(_objectSpread({}, channel), action.value) : channel;
|
|
96
|
-
});
|
|
97
|
-
} else {
|
|
98
|
-
// ChannelSettingUniformUpdateAction on a single channel
|
|
99
|
-
var newSettings = channelSettings.slice();
|
|
100
|
-
if (action.index >= 0 && action.index < channelSettings.length) {
|
|
101
|
-
newSettings[action.index] = _objectSpread(_objectSpread({}, newSettings[action.index]), action.value);
|
|
102
|
-
}
|
|
103
|
-
return newSettings;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
var nullfn = function nullfn() {};
|
|
108
|
-
var DEFAULT_VIEWER_CONTEXT = _objectSpread(_objectSpread({}, getDefaultViewerState()), {}, {
|
|
109
|
-
channelSettings: [],
|
|
110
|
-
changeViewerSetting: nullfn,
|
|
111
|
-
setChannelSettings: nullfn,
|
|
112
|
-
changeChannelSetting: nullfn,
|
|
113
|
-
applyColorPresets: nullfn,
|
|
114
|
-
resetToSavedViewerState: nullfn,
|
|
115
|
-
resetToDefaultViewerState: nullfn,
|
|
116
|
-
setSavedViewerChannelSettings: nullfn,
|
|
117
|
-
getCurrentViewerChannelSettings: function getCurrentViewerChannelSettings() {
|
|
118
|
-
return getDefaultViewerChannelSettings();
|
|
119
|
-
},
|
|
120
|
-
getChannelsAwaitingReset: function getChannelsAwaitingReset() {
|
|
121
|
-
return new Set();
|
|
122
|
-
},
|
|
123
|
-
getChannelsAwaitingResetOnLoad: function getChannelsAwaitingResetOnLoad() {
|
|
124
|
-
return new Set();
|
|
125
|
-
},
|
|
126
|
-
onResetChannel: nullfn
|
|
127
|
-
});
|
|
128
|
-
export var ALL_VIEWER_STATE_KEYS = Object.keys(DEFAULT_VIEWER_CONTEXT);
|
|
129
|
-
var DEFAULT_VIEWER_CONTEXT_OUTER = {
|
|
130
|
-
ref: {
|
|
131
|
-
current: DEFAULT_VIEWER_CONTEXT
|
|
132
|
-
}
|
|
133
|
-
};
|
|
134
|
-
export var ViewerStateContext = /*#__PURE__*/React.createContext(DEFAULT_VIEWER_CONTEXT_OUTER);
|
|
135
|
-
|
|
136
|
-
/** Provides a central store for the state of the viewer, and the methods to update it. */
|
|
137
|
-
var ViewerStateProvider = function ViewerStateProvider(props) {
|
|
138
|
-
var _useReducer = useReducer(viewerSettingsReducer, _objectSpread({}, getDefaultViewerState())),
|
|
139
|
-
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
140
|
-
viewerSettings = _useReducer2[0],
|
|
141
|
-
viewerDispatch = _useReducer2[1];
|
|
142
|
-
var _useReducer3 = useReducer(channelSettingsReducer, []),
|
|
143
|
-
_useReducer4 = _slicedToArray(_useReducer3, 2),
|
|
144
|
-
channelSettings = _useReducer4[0],
|
|
145
|
-
channelDispatch = _useReducer4[1];
|
|
146
|
-
// Provide viewer state via a ref, so that closures that run asynchronously can capture the ref instead of the
|
|
147
|
-
// specific values they need and always have the most up-to-date state.
|
|
148
|
-
var ref = useRef(DEFAULT_VIEWER_CONTEXT);
|
|
149
|
-
var resetProvider = useConstructor(function () {
|
|
150
|
-
return new ResetStateProvider(ref);
|
|
151
|
-
});
|
|
152
|
-
useEffect(function () {
|
|
153
|
-
resetProvider.setSavedViewerState(props.viewerSettings || {});
|
|
154
|
-
}, [props.viewerSettings, resetProvider]);
|
|
155
|
-
var changeViewerSetting = useCallback(function (key, value) {
|
|
156
|
-
return viewerDispatch({
|
|
157
|
-
key: key,
|
|
158
|
-
value: value
|
|
159
|
-
});
|
|
160
|
-
}, []);
|
|
161
|
-
var changeChannelSetting = useCallback(function (index, value) {
|
|
162
|
-
channelDispatch({
|
|
163
|
-
type: ChannelSettingActionType.UniformUpdate,
|
|
164
|
-
index: index,
|
|
165
|
-
value: value
|
|
166
|
-
});
|
|
167
|
-
}, []);
|
|
168
|
-
var applyColorPresets = useCallback(function (value) {
|
|
169
|
-
return channelDispatch({
|
|
170
|
-
type: ChannelSettingActionType.ArrayUpdate,
|
|
171
|
-
key: "color",
|
|
172
|
-
value: value
|
|
173
|
-
});
|
|
174
|
-
}, []);
|
|
175
|
-
var setChannelSettings = useCallback(function (channels) {
|
|
176
|
-
return channelDispatch({
|
|
177
|
-
type: ChannelSettingActionType.Init,
|
|
178
|
-
value: channels
|
|
179
|
-
});
|
|
180
|
-
}, []);
|
|
181
|
-
|
|
182
|
-
// https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
|
|
183
|
-
var prevViewerSettingsPropsRef = useRef(undefined);
|
|
184
|
-
if (props.viewerSettings && !isEqual(props.viewerSettings, prevViewerSettingsPropsRef.current)) {
|
|
185
|
-
for (var _i = 0, _arr = Object.keys(props.viewerSettings); _i < _arr.length; _i++) {
|
|
186
|
-
var key = _arr[_i];
|
|
187
|
-
if (viewerSettings[key] !== props.viewerSettings[key]) {
|
|
188
|
-
changeViewerSetting(key, props.viewerSettings[key]);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
prevViewerSettingsPropsRef.current = props.viewerSettings;
|
|
192
|
-
}
|
|
193
|
-
var context = useMemo(function () {
|
|
194
|
-
ref.current = _objectSpread(_objectSpread({}, viewerSettings), {}, {
|
|
195
|
-
channelSettings: channelSettings,
|
|
196
|
-
changeViewerSetting: changeViewerSetting,
|
|
197
|
-
setChannelSettings: setChannelSettings,
|
|
198
|
-
changeChannelSetting: changeChannelSetting,
|
|
199
|
-
applyColorPresets: applyColorPresets,
|
|
200
|
-
// Reset-related callbacks
|
|
201
|
-
setSavedViewerChannelSettings: resetProvider.setSavedViewerChannelSettings,
|
|
202
|
-
getCurrentViewerChannelSettings: resetProvider.getCurrentViewerChannelSettings,
|
|
203
|
-
getChannelsAwaitingReset: resetProvider.getChannelsAwaitingReset,
|
|
204
|
-
getChannelsAwaitingResetOnLoad: resetProvider.getChannelsAwaitingResetOnLoad,
|
|
205
|
-
onResetChannel: resetProvider.onResetChannel,
|
|
206
|
-
resetToSavedViewerState: resetProvider.resetToSavedViewerState,
|
|
207
|
-
resetToDefaultViewerState: resetProvider.resetToDefaultViewerState
|
|
208
|
-
});
|
|
209
|
-
|
|
210
|
-
// `ref` is wrapped in another object to ensure that the context updates when state does.
|
|
211
|
-
// (`ref` on its own would always compare equal to itself and the context would never update.)
|
|
212
|
-
return {
|
|
213
|
-
ref: ref
|
|
214
|
-
};
|
|
215
|
-
}, [viewerSettings, channelSettings, applyColorPresets, changeViewerSetting, changeChannelSetting, setChannelSettings, resetProvider]);
|
|
216
|
-
return /*#__PURE__*/React.createElement(ViewerStateContext.Provider, {
|
|
217
|
-
value: context
|
|
218
|
-
}, props.children);
|
|
219
|
-
};
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Higher-order component that connects a component to the viewer state context.
|
|
223
|
-
*
|
|
224
|
-
* Accepts a `component` and an array of `keys` from the viewer state context, and returns a new memoized component
|
|
225
|
-
* which "subscribes" to only those fields of state, and will not re-render if other fields change. This works by
|
|
226
|
-
* creating a component which is "split in two" as described
|
|
227
|
-
* [here](https://react.dev/reference/react/memo#updating-a-memoized-component-using-a-context).
|
|
228
|
-
*
|
|
229
|
-
* NOTE that while higher-order components don't seem to be explicitly considered an anti-pattern, they don't appear in
|
|
230
|
-
* modern documentation because they are "[not commonly used in modern React
|
|
231
|
-
* code](https://legacy.reactjs.org/docs/higher-order-components.html)." React-redux, which inspired this "connect"
|
|
232
|
-
* pattern, has also generally moved away from this pattern [in favor of a hooks-based
|
|
233
|
-
* approach](https://react-redux.js.org/api/hooks). I too would love to use hooks to connect to viewer state, but there
|
|
234
|
-
* is currently no way to hook into context without agreeing to re-render on every change. I feel okay using a higher-
|
|
235
|
-
* order component in this case because, analogous to a custom hook, it extends a provided primitive HOC (`memo`).
|
|
236
|
-
*/
|
|
237
|
-
export function connectToViewerState(component, keys) {
|
|
238
|
-
var MemoedComponent = /*#__PURE__*/React.memo(component);
|
|
239
|
-
var ConnectedComponent = function ConnectedComponent(props) {
|
|
240
|
-
var viewerState = useContext(ViewerStateContext);
|
|
241
|
-
var mergedProps = _objectSpread({}, props);
|
|
242
|
-
var _iterator = _createForOfIteratorHelper(keys),
|
|
243
|
-
_step;
|
|
244
|
-
try {
|
|
245
|
-
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
246
|
-
var key = _step.value;
|
|
247
|
-
mergedProps[key] = viewerState.ref.current[key];
|
|
248
|
-
}
|
|
249
|
-
} catch (err) {
|
|
250
|
-
_iterator.e(err);
|
|
251
|
-
} finally {
|
|
252
|
-
_iterator.f();
|
|
253
|
-
}
|
|
254
|
-
return /*#__PURE__*/React.createElement(MemoedComponent, mergedProps);
|
|
255
|
-
};
|
|
256
|
-
ConnectedComponent.displayName = "Connected(".concat(component.displayName || component.name, ")");
|
|
257
|
-
return ConnectedComponent;
|
|
258
|
-
}
|
|
259
|
-
export default ViewerStateProvider;
|
package/type-declarations/aics-image-viewer/components/ViewerStateProvider/ResetStateProvider.d.ts
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ViewerState, ViewerStateContextType, ResetState } from "./types";
|
|
3
|
-
import { ViewerChannelSettings } from "../../shared/utils/viewerChannelSettings";
|
|
4
|
-
/**
|
|
5
|
-
* Provides reset functionality for the viewer and channel states.
|
|
6
|
-
*/
|
|
7
|
-
export default class ResetStateProvider implements ResetState {
|
|
8
|
-
savedViewerState: Partial<ViewerState>;
|
|
9
|
-
savedViewerChannelSettings: ViewerChannelSettings | undefined;
|
|
10
|
-
useDefaultViewerChannelSettings: boolean;
|
|
11
|
-
channelsToReset: Set<number>;
|
|
12
|
-
channelsToResetOnLoad: Set<number>;
|
|
13
|
-
ref: React.MutableRefObject<ViewerStateContextType>;
|
|
14
|
-
constructor(viewerStateRef: React.MutableRefObject<ViewerStateContextType>);
|
|
15
|
-
setSavedViewerState(state: Partial<ViewerState>): void;
|
|
16
|
-
setSavedViewerChannelSettings(settings: ViewerChannelSettings | undefined): void;
|
|
17
|
-
getChannelsAwaitingReset(): Set<number>;
|
|
18
|
-
getChannelsAwaitingResetOnLoad(): Set<number>;
|
|
19
|
-
onResetChannel(channelIndex: number): void;
|
|
20
|
-
/**
|
|
21
|
-
* Returns the current viewer channel settings that the viewer should use when
|
|
22
|
-
* resetting channels to an initial state.
|
|
23
|
-
*/
|
|
24
|
-
getCurrentViewerChannelSettings(): ViewerChannelSettings | undefined;
|
|
25
|
-
/**
|
|
26
|
-
* Helper method. Resets the viewer and all channels to the provided state. If new data needs to
|
|
27
|
-
* be loaded, handles setup so the reset will be applied to each channel as it loads in.
|
|
28
|
-
*/
|
|
29
|
-
private resetToState;
|
|
30
|
-
/** Resets to the initial saved state of the viewer, as shown to the user on load. */
|
|
31
|
-
resetToSavedViewerState(): void;
|
|
32
|
-
/** Reset to global default viewer state, as if loading the volume with no parameters. */
|
|
33
|
-
resetToDefaultViewerState(): void;
|
|
34
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { ViewerState, ViewerStateContextType } from "./types";
|
|
3
|
-
export declare const ALL_VIEWER_STATE_KEYS: (keyof ViewerState | keyof import("./types").ResetState | "channelSettings" | "changeViewerSetting" | "changeChannelSetting" | "setChannelSettings" | "applyColorPresets")[];
|
|
4
|
-
type NoNull<T> = {
|
|
5
|
-
[K in keyof T]: NonNullable<T[K]>;
|
|
6
|
-
};
|
|
7
|
-
type ContextRefType = NoNull<React.MutableRefObject<ViewerStateContextType>>;
|
|
8
|
-
export declare const ViewerStateContext: React.Context<{
|
|
9
|
-
ref: ContextRefType;
|
|
10
|
-
}>;
|
|
11
|
-
/** Provides a central store for the state of the viewer, and the methods to update it. */
|
|
12
|
-
declare const ViewerStateProvider: React.FC<{
|
|
13
|
-
viewerSettings?: Partial<ViewerState>;
|
|
14
|
-
children?: React.ReactNode;
|
|
15
|
-
}>;
|
|
16
|
-
/**
|
|
17
|
-
* Higher-order component that connects a component to the viewer state context.
|
|
18
|
-
*
|
|
19
|
-
* Accepts a `component` and an array of `keys` from the viewer state context, and returns a new memoized component
|
|
20
|
-
* which "subscribes" to only those fields of state, and will not re-render if other fields change. This works by
|
|
21
|
-
* creating a component which is "split in two" as described
|
|
22
|
-
* [here](https://react.dev/reference/react/memo#updating-a-memoized-component-using-a-context).
|
|
23
|
-
*
|
|
24
|
-
* NOTE that while higher-order components don't seem to be explicitly considered an anti-pattern, they don't appear in
|
|
25
|
-
* modern documentation because they are "[not commonly used in modern React
|
|
26
|
-
* code](https://legacy.reactjs.org/docs/higher-order-components.html)." React-redux, which inspired this "connect"
|
|
27
|
-
* pattern, has also generally moved away from this pattern [in favor of a hooks-based
|
|
28
|
-
* approach](https://react-redux.js.org/api/hooks). I too would love to use hooks to connect to viewer state, but there
|
|
29
|
-
* is currently no way to hook into context without agreeing to re-render on every change. I feel okay using a higher-
|
|
30
|
-
* order component in this case because, analogous to a custom hook, it extends a provided primitive HOC (`memo`).
|
|
31
|
-
*/
|
|
32
|
-
export declare function connectToViewerState<Keys extends keyof ViewerStateContextType, Props extends Pick<ViewerStateContextType, Keys>>(component: React.FC<Props>, keys: Keys[]): React.FC<Omit<Props, Keys>>;
|
|
33
|
-
export default ViewerStateProvider;
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { CameraState, ControlPoint } from "@aics/vole-core";
|
|
2
|
-
import type { ImageType, RenderMode, ViewMode } from "../../shared/enums";
|
|
3
|
-
import type { PerAxis } from "../../shared/types";
|
|
4
|
-
import type { ColorArray } from "../../shared/utils/colorRepresentations";
|
|
5
|
-
import { ViewerChannelSettings } from "../../shared/utils/viewerChannelSettings";
|
|
6
|
-
/** Global (not per-channel) viewer state which may be changed in the UI */
|
|
7
|
-
export interface ViewerState {
|
|
8
|
-
viewMode: ViewMode;
|
|
9
|
-
renderMode: RenderMode;
|
|
10
|
-
imageType: ImageType;
|
|
11
|
-
showAxes: boolean;
|
|
12
|
-
showBoundingBox: boolean;
|
|
13
|
-
boundingBoxColor: ColorArray;
|
|
14
|
-
backgroundColor: ColorArray;
|
|
15
|
-
autorotate: boolean;
|
|
16
|
-
maskAlpha: number;
|
|
17
|
-
brightness: number;
|
|
18
|
-
density: number;
|
|
19
|
-
levels: [number, number, number];
|
|
20
|
-
interpolationEnabled: boolean;
|
|
21
|
-
region: PerAxis<[number, number]>;
|
|
22
|
-
slice: PerAxis<number>;
|
|
23
|
-
time: number;
|
|
24
|
-
scene: number;
|
|
25
|
-
cameraState: Partial<CameraState> | undefined;
|
|
26
|
-
}
|
|
27
|
-
export type ViewerStateKey = keyof ViewerState;
|
|
28
|
-
/**
|
|
29
|
-
* If a value in `ViewerState` is an object, we want to allow updates with a partial object. Otherwise, components that
|
|
30
|
-
* update some but not all of the object's properties have to know the object's current value in order to clone it with
|
|
31
|
-
* only the key they care about updated, which exposes us to stale closure issues.
|
|
32
|
-
*/
|
|
33
|
-
export type PartialIfObject<T> = T extends Record<string, unknown> ? Partial<T> : T;
|
|
34
|
-
/**
|
|
35
|
-
* A type which lets us provide a map of optional check functions for certain settings updates, to avoid entering
|
|
36
|
-
* illegal states. E.g., whenever `renderMode` is changed to pathtrace, make sure `autorotate` is set to false.
|
|
37
|
-
*/
|
|
38
|
-
export type ViewerSettingChangeHandlers = {
|
|
39
|
-
[K in ViewerStateKey]?: (settings: ViewerState, value: PartialIfObject<ViewerState[K]>) => ViewerState;
|
|
40
|
-
};
|
|
41
|
-
/**
|
|
42
|
-
* The type of the global settings updater provided by `ViewerStateProvider` and passed down to most UI components.
|
|
43
|
-
* Looks kind of like redux's `dispatch` if you squint. `key` names the setting to update; `value` is the new
|
|
44
|
-
* (potentially partial) value.
|
|
45
|
-
*/
|
|
46
|
-
export type ViewerSettingUpdater = <K extends ViewerStateKey>(key: K, value: PartialIfObject<ViewerState[K]>) => void;
|
|
47
|
-
/** Settings for a single channel, as stored internally by the app */
|
|
48
|
-
export interface ChannelState {
|
|
49
|
-
name: string;
|
|
50
|
-
displayName: string;
|
|
51
|
-
volumeEnabled: boolean;
|
|
52
|
-
isosurfaceEnabled: boolean;
|
|
53
|
-
isovalue: number;
|
|
54
|
-
colorizeEnabled: boolean;
|
|
55
|
-
colorizeAlpha: number;
|
|
56
|
-
opacity: number;
|
|
57
|
-
color: ColorArray;
|
|
58
|
-
ramp: [number, number];
|
|
59
|
-
useControlPoints: boolean;
|
|
60
|
-
controlPoints: ControlPoint[];
|
|
61
|
-
plotMin: number;
|
|
62
|
-
plotMax: number;
|
|
63
|
-
}
|
|
64
|
-
export type ChannelStateKey = keyof ChannelState;
|
|
65
|
-
export type ChannelSettingUpdater = <K extends ChannelStateKey>(index: number | number[], value: Partial<Record<K, ChannelState[K]>>) => void;
|
|
66
|
-
export type SingleChannelSettingUpdater = <K extends ChannelStateKey>(value: Partial<Record<K, ChannelState[K]>>) => void;
|
|
67
|
-
export type ResetState = {
|
|
68
|
-
/**
|
|
69
|
-
* Sets the initial viewer channel settings that will be applied when calling
|
|
70
|
-
* `resetToSavedViewerState()`. Initial settings should be set from the viewer props (when embedded)
|
|
71
|
-
* or the URL parameters.
|
|
72
|
-
*/
|
|
73
|
-
setSavedViewerChannelSettings: (settings: ViewerChannelSettings | undefined) => void;
|
|
74
|
-
/**
|
|
75
|
-
* Returns the current viewer channel settings that should be used when resetting
|
|
76
|
-
* the channel transfer functions (control points and ramp).
|
|
77
|
-
*/
|
|
78
|
-
getCurrentViewerChannelSettings: () => ViewerChannelSettings | undefined;
|
|
79
|
-
/** Channels that should be immediately reset on next render. */
|
|
80
|
-
getChannelsAwaitingReset: () => Set<number>;
|
|
81
|
-
/** Channels that should be reset once new data is loaded. */
|
|
82
|
-
getChannelsAwaitingResetOnLoad: () => Set<number>;
|
|
83
|
-
/**
|
|
84
|
-
* Removes the channel from the list of channels to be reset (as given by
|
|
85
|
-
* `getChannelsAwaitingReset()` or `getChannelsAwaitingResetOnLoad()`).
|
|
86
|
-
*/
|
|
87
|
-
onResetChannel: (channelIndex: number) => void;
|
|
88
|
-
/**
|
|
89
|
-
* Resets the viewer and all channels to a saved initial state, determined
|
|
90
|
-
* by viewer props.
|
|
91
|
-
* The initial settings for channels can be set with `setSavedViewerChannelSettings()`.
|
|
92
|
-
*/
|
|
93
|
-
resetToSavedViewerState: () => void;
|
|
94
|
-
/**
|
|
95
|
-
* Resets the viewer and all channels to the default state, as though
|
|
96
|
-
* loaded from scratch with no initial parameters set.
|
|
97
|
-
* Uses the default channel settings as given by `getDefaultViewerChannelSettings()`.
|
|
98
|
-
*/
|
|
99
|
-
resetToDefaultViewerState: () => void;
|
|
100
|
-
};
|
|
101
|
-
export type ViewerStateContextType = ViewerState & ResetState & {
|
|
102
|
-
channelSettings: ChannelState[];
|
|
103
|
-
changeViewerSetting: ViewerSettingUpdater;
|
|
104
|
-
changeChannelSetting: ChannelSettingUpdater;
|
|
105
|
-
setChannelSettings: (settings: ChannelState[]) => void;
|
|
106
|
-
applyColorPresets: (presets: ColorArray[]) => void;
|
|
107
|
-
};
|
|
File without changes
|