molstar
Version:
A comprehensive macromolecular library.
106 lines (105 loc) • 7.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DownloadScreenshotControls = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var commands_1 = require("../../mol-plugin/commands");
var base_1 = require("../base");
var common_1 = require("../controls/common");
var icons_1 = require("../controls/icons");
var parameters_1 = require("../controls/parameters");
var screenshot_1 = require("../controls/screenshot");
var use_behavior_1 = require("../hooks/use-behavior");
var snapshots_1 = require("../state/snapshots");
var DownloadScreenshotControls = /** @class */ (function (_super) {
tslib_1.__extends(DownloadScreenshotControls, _super);
function DownloadScreenshotControls() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
showPreview: true,
isDisabled: false
};
_this.download = function () {
var _a;
(_a = _this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.download();
_this.props.close();
};
_this.copy = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var _a;
var _b;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0:
_c.trys.push([0, 2, , 3]);
return [4 /*yield*/, ((_b = this.plugin.helpers.viewportScreenshot) === null || _b === void 0 ? void 0 : _b.copyToClipboard())];
case 1:
_c.sent();
commands_1.PluginCommands.Toast.Show(this.plugin, {
message: 'Copied to clipboard.',
title: 'Screenshot',
timeoutMs: 1500
});
return [3 /*break*/, 3];
case 2:
_a = _c.sent();
return [2 /*return*/, this.copyImg()];
case 3: return [2 /*return*/];
}
});
}); };
_this.copyImg = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var src;
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, ((_a = this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.getImageDataUri())];
case 1:
src = _b.sent();
this.setState({ imageData: src });
return [2 /*return*/];
}
});
}); };
_this.open = function (e) {
if (!e.target.files || !e.target.files[0])
return;
commands_1.PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: e.target.files[0] });
};
return _this;
}
DownloadScreenshotControls.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.state.data.behaviors.isUpdating, function (v) {
_this.setState({ isDisabled: v });
});
};
DownloadScreenshotControls.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
this.setState({ imageData: void 0 });
};
DownloadScreenshotControls.prototype.render = function () {
var _this = this;
var _a;
var hasClipboardApi = !!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write);
return (0, jsx_runtime_1.jsxs)("div", { children: [this.state.showPreview && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-image-preview' }, { children: [(0, jsx_runtime_1.jsx)(screenshot_1.ScreenshotPreview, { plugin: this.plugin }), (0, jsx_runtime_1.jsx)(CropControls, { plugin: this.plugin })] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [!this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled }, { children: "Copy" })), this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: function () { return _this.setState({ imageData: void 0 }); }, disabled: this.state.isDisabled }, { children: "Clear" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.GetAppSvg, onClick: this.download, disabled: this.state.isDisabled }, { children: "Download" }))] })), this.state.imageData && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-row msp-copy-image-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "Right click below + Copy Image" }), (0, jsx_runtime_1.jsx)("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } })] })), (0, jsx_runtime_1.jsx)(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled }), (0, jsx_runtime_1.jsxs)(common_1.ExpandGroup, tslib_1.__assign({ header: 'State' }, { children: [(0, jsx_runtime_1.jsx)(snapshots_1.StateExportImportControls, { onAction: this.props.close }), (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: 'Save Options', initiallyExpanded: false, noOffset: true }, { children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshotParams, {}) }))] }))] });
};
return DownloadScreenshotControls;
}(base_1.PluginUIComponent));
exports.DownloadScreenshotControls = DownloadScreenshotControls;
function ScreenshotParams(_a) {
var plugin = _a.plugin, isDisabled = _a.isDisabled;
var helper = plugin.helpers.viewportScreenshot;
var values = (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.values);
if (!helper)
return null;
return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: helper.params, values: values, onChangeValues: function (v) { return helper.behaviors.values.next(v); }, isDisabled: isDisabled });
}
function CropControls(_a) {
var plugin = _a.plugin;
var helper = plugin.helpers.viewportScreenshot;
var cropParams = (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.cropParams);
(0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.relativeCrop);
if (!helper || !cropParams)
return null;
return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { width: '100%', height: '24px', marginTop: '8px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.CropOrginalSvg, title: 'Auto-crop', inline: true, isSelected: cropParams.auto, style: { background: 'transparent', float: 'left', width: 'auto', height: '24px', lineHeight: '24px' }, toggle: function () { return helper.toggleAutocrop(); }, label: 'Auto-crop ' + (cropParams.auto ? 'On' : 'Off') }), !cropParams.auto && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropSvg, title: 'Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.autocrop(); } }), !cropParams.auto && !helper.isFullFrame && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropFreeSvg, title: 'Reset Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.resetCrop(); } })] }));
}