molstar 3.0.0-dev.3 → 3.0.0-dev.4

package/lib/commonjs/mol-plugin/util/viewport-screenshot.d.ts

@@ -37,10 +37,13 @@ declare class ViewportScreenshotHelper extends PluginComponent {
             flipSided: boolean;
             flatShaded: boolean;
             xrayShaded: boolean;
+            bumpFrequency: number;
+            bumpAmplitude: number;
             quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
             material: PD.Normalize<{
                 metalness: number;
                 roughness: number;
+                bumpiness: number;
             }>;
         }>, "on">>;
     };
@@ -62,10 +65,13 @@ declare class ViewportScreenshotHelper extends PluginComponent {
                 flipSided: boolean;
                 flatShaded: boolean;
                 xrayShaded: boolean;
+                bumpFrequency: number;
+                bumpAmplitude: number;
                 quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
                 material: PD.Normalize<{
                     metalness: number;
                     roughness: number;
+                    bumpiness: number;
                 }>;
             }>, "on">>;
         }>>;
@@ -95,10 +101,13 @@ declare class ViewportScreenshotHelper extends PluginComponent {
             flipSided: boolean;
             flatShaded: boolean;
             xrayShaded: boolean;
+            bumpFrequency: number;
+            bumpAmplitude: number;
             quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
             material: PD.Normalize<{
                 metalness: number;
                 roughness: number;
+                bumpiness: number;
             }>;
         }>, "on">>;
     }>;

package/lib/commonjs/mol-plugin-state/manager/structure/component.d.ts

@@ -61,6 +61,7 @@ declare namespace StructureComponentManager {
         materialStyle: PD.Group<PD.Normalize<{
             metalness: number;
             roughness: number;
+            bumpiness: number;
         }>>;
         interactions: PD.Group<PD.Normalize<{
             providers: PD.Normalize<{
@@ -108,6 +109,7 @@ declare namespace StructureComponentManager {
             material: PD.Normalize<{
                 metalness: number;
                 roughness: number;
+                bumpiness: number;
             }>;
         }>, "material"> | PD.NamedParams<PD.Normalize<{
             value: number;

package/lib/commonjs/mol-plugin-state/transforms/representation.d.ts

@@ -93,6 +93,7 @@ declare const SubstanceStructureRepresentation3DFromScript: StateTransformer<SO.
         material: {
             metalness: number;
             roughness: number;
+            bumpiness: number;
         };
         clear: boolean;
     }>[];
@@ -104,6 +105,7 @@ declare const SubstanceStructureRepresentation3DFromBundle: StateTransformer<SO.
         material: {
             metalness: number;
             roughness: number;
+            bumpiness: number;
         };
         clear: boolean;
     }>[];
@@ -148,11 +150,14 @@ declare const ModelUnitcell3D: StateTransformer<SO.Molecule.Model, SO.Shape.Repr
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    bumpFrequency: number;
+    bumpAmplitude: number;
     alpha: number;
     quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
     material: PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>;
 }>>;
 export { StructureBoundingBox3D };
@@ -163,11 +168,14 @@ declare const StructureBoundingBox3D: StateTransformer<SO.Molecule.Structure, SO
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    bumpFrequency: number;
+    bumpAmplitude: number;
     alpha: number;
     quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
     material: PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>;
     radius: number;
     color: Color;
@@ -204,6 +212,7 @@ declare const StructureSelectionsDistance3D: StateTransformer<SO.Molecule.Struct
     material: PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>;
     lineSizeAttenuation: boolean;
     linesColor: Color;
@@ -241,6 +250,7 @@ declare const StructureSelectionsAngle3D: StateTransformer<SO.Molecule.Structure
     material: PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>;
     ignoreLight: boolean;
     sectorOpacity: number;
@@ -250,6 +260,8 @@ declare const StructureSelectionsAngle3D: StateTransformer<SO.Molecule.Structure
     flipSided: boolean;
     flatShaded: boolean;
     xrayShaded: boolean;
+    bumpFrequency: number;
+    bumpAmplitude: number;
     lineSizeAttenuation: boolean;
     linesSize: number;
     dashLength: number;
@@ -285,6 +297,7 @@ declare const StructureSelectionsDihedral3D: StateTransformer<SO.Molecule.Struct
     material: PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>;
     ignoreLight: boolean;
     sectorOpacity: number;
@@ -294,6 +307,8 @@ declare const StructureSelectionsDihedral3D: StateTransformer<SO.Molecule.Struct
     flipSided: boolean;
     flatShaded: boolean;
     xrayShaded: boolean;
+    bumpFrequency: number;
+    bumpAmplitude: number;
     lineSizeAttenuation: boolean;
     linesSize: number;
     dashLength: number;
@@ -330,6 +345,7 @@ declare const StructureSelectionsLabel3D: StateTransformer<SO.Molecule.Structure
     material: PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>;
 }>>;
 export { StructureSelectionsOrientation3D };
@@ -344,11 +360,14 @@ declare const StructureSelectionsOrientation3D: StateTransformer<SO.Molecule.Str
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    bumpFrequency: number;
+    bumpAmplitude: number;
     alpha: number;
     quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
     material: PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>;
 }>>;
 export { StructureSelectionsPlane3D };
@@ -362,10 +381,13 @@ declare const StructureSelectionsPlane3D: StateTransformer<SO.Molecule.Structure
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    bumpFrequency: number;
+    bumpAmplitude: number;
     alpha: number;
     quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
     material: PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>;
 }>>;

package/lib/commonjs/mol-plugin-ui/controls/parameters.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
@@ -10,8 +10,8 @@ import { Legend as LegendData } from '../../mol-util/legend';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { ParamMapping } from '../../mol-util/param-mapping';
 import { PluginUIComponent } from '../base';
-import { ActionMenu } from './action-menu';
 import { PluginUIContext } from '../context';
+import { ActionMenu } from './action-menu';
 export declare type ParameterControlsCategoryFilter = string | null | (string | null)[];
 export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
     params: P;
@@ -304,6 +304,7 @@ export declare class GroupControl extends React.PureComponent<ParamProps<PD.Grou
     toggleShowPresets: () => void;
     presetItems: (param: PD.Group<any>) => ActionMenu.Items[];
     onSelectPreset: ActionMenu.OnSelect;
+    pivotedPresets(): JSX.Element | null;
     presets(): JSX.Element | null;
     pivoted(): JSX.Element;
     render(): JSX.Element | null;

package/lib/commonjs/mol-plugin-ui/controls/parameters.js

@@ -4,13 +4,14 @@ exports.ScriptControl = exports.ConvertedControl = exports.ConditionedControl =
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 var React = (0, tslib_1.__importStar)(require("react"));
 var linear_algebra_1 = require("../../mol-math/linear-algebra");
+var assets_1 = require("../../mol-util/assets");
 var color_1 = require("../../mol-util/color");
 var lists_1 = require("../../mol-util/color/lists");
 var memoize_1 = require("../../mol-util/memoize");
@@ -25,7 +26,6 @@ var icons_1 = require("./icons");
 var legend_1 = require("./legend");
 var line_graph_component_1 = require("./line-graph/line-graph-component");
 var slider_1 = require("./slider");
-var assets_1 = require("../../mol-util/assets");
 var ParameterControls = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(ParameterControls, _super);
     function ParameterControls() {
@@ -1029,11 +1029,16 @@ var GroupControl = /** @class */ (function (_super) {
     GroupControl.prototype.change = function (value) {
         this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
     };
-    GroupControl.prototype.presets = function () {
+    GroupControl.prototype.pivotedPresets = function () {
         if (!this.props.param.presets)
             return null;
         var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.TuneSvg }, void 0), label, " Presets"] }), void 0) }), void 0), this.state.showPresets && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BookmarksOutlinedSvg }, void 0), label, " Presets"] }), void 0) }), void 0), this.state.showPresets && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }), void 0);
+    };
+    GroupControl.prototype.presets = function () {
+        if (!this.props.param.presets)
+            return null;
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-presets-wrapper' }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BookmarksOutlinedSvg }, void 0), "Presets"] }), void 0) }), void 0) }), void 0), this.state.showPresets && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }, void 0);
     };
     GroupControl.prototype.pivoted = function () {
         var key = this.props.param.pivot;
@@ -1050,7 +1055,7 @@ var GroupControl = /** @class */ (function (_super) {
             if (k !== key)
                 filtered[k] = params[k];
         }
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [this.presets(), (0, jsx_runtime_1.jsx)(ParameterControls, { params: filtered, onEnter: this.props.onEnter, values: this.props.value, onChange: this.onChangeParam, isDisabled: this.props.isDisabled }, void 0)] }), void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [this.pivotedPresets(), (0, jsx_runtime_1.jsx)(ParameterControls, { params: filtered, onEnter: this.props.onEnter, values: this.props.value, onChange: this.onChangeParam, isDisabled: this.props.isDisabled }, void 0)] }), void 0)] }), void 0);
     };
     GroupControl.prototype.render = function () {
         var params = this.props.param.params;
@@ -1067,7 +1072,7 @@ var GroupControl = /** @class */ (function (_super) {
         if (this.props.param.isFlat) {
             return controls;
         }
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg }, void 0), label] }), void 0) }), void 0), this.state.isExpanded && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [this.presets(), controls] }), void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper', style: { position: 'relative' } }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg }, void 0), label] }), void 0) }), void 0), this.presets(), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: controls }), void 0)] }), void 0);
     };
     return GroupControl;
 }(React.PureComponent));

package/lib/commonjs/mol-plugin-ui/hooks/use-behavior.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-21 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */

package/lib/commonjs/mol-plugin-ui/hooks/use-behavior.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-21 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
@@ -9,29 +9,20 @@ exports.useBehavior = void 0;
 var react_1 = require("react");
 // eslint-disable-next-line
 function useBehavior(s) {
-    var _a = (0, react_1.useState)(s === null || s === void 0 ? void 0 : s.value), value = _a[0], setValue = _a[1];
+    var _a = (0, react_1.useState)({}), next = _a[1];
+    var current = (0, react_1.useRef)();
+    current.current = s === null || s === void 0 ? void 0 : s.value;
     (0, react_1.useEffect)(function () {
         if (!s) {
-            if (value !== void 0)
-                setValue(void 0);
             return;
         }
-        var fst = true;
         var sub = s.subscribe(function (v) {
-            if (fst) {
-                fst = false;
-                if (v !== value)
-                    setValue(v);
-            }
-            else
-                setValue(v);
+            if (current.current !== v)
+                next({});
         });
-        return function () {
-            sub.unsubscribe();
-        };
-        // eslint-disable-next-line
+        return function () { return sub.unsubscribe(); };
     }, [s]);
-    return value;
+    return s === null || s === void 0 ? void 0 : s.value;
 }
 exports.useBehavior = useBehavior;
 //# sourceMappingURL=use-behavior.js.map

package/lib/commonjs/mol-plugin-ui/plugin.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>

package/lib/commonjs/mol-plugin-ui/plugin.js

@@ -13,6 +13,10 @@ var task_1 = require("./task");
 var toast_1 = require("./toast");
 var viewport_1 = require("./viewport");
 var commands_1 = require("../mol-plugin/commands");
+var file_1 = require("../mol-plugin-state/actions/file");
+var assets_1 = require("../mol-util/assets");
+var rxjs_1 = require("rxjs");
+var use_behavior_1 = require("./hooks/use-behavior");
 var Plugin = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(Plugin, _super);
     function Plugin() {
@@ -44,29 +48,44 @@ var Layout = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.onDrop = function (ev) {
             ev.preventDefault();
-            var file;
+            var files = [];
             if (ev.dataTransfer.items) {
                 // Use DataTransferItemList interface to access the file(s)
                 for (var i = 0; i < ev.dataTransfer.items.length; i++) {
                     if (ev.dataTransfer.items[i].kind !== 'file')
                         continue;
-                    file = ev.dataTransfer.items[i].getAsFile();
-                    break;
+                    var file = ev.dataTransfer.items[i].getAsFile();
+                    if (file)
+                        files.push(file);
                 }
             }
             else {
-                file = ev.dataTransfer.files[0];
+                for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+                    var file = ev.dataTransfer.files[0];
+                    if (file)
+                        files.push(file);
+                }
+            }
+            var sessions = files.filter(function (f) {
+                var fn = f.name.toLowerCase();
+                return fn.endsWith('.molx') || fn.endsWith('.molj');
+            });
+            if (sessions.length > 0) {
+                commands_1.PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: sessions[0] });
             }
-            if (!file)
-                return;
-            var fn = (file === null || file === void 0 ? void 0 : file.name.toLowerCase()) || '';
-            if (fn.endsWith('molx') || fn.endsWith('molj')) {
-                commands_1.PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: file });
+            else {
+                _this.plugin.runTask(_this.plugin.state.data.applyAction(file_1.OpenFiles, {
+                    files: files.map(function (f) { return assets_1.Asset.File(f); }),
+                    format: { name: 'auto', params: {} },
+                    visuals: true
+                }));
             }
         };
         _this.onDragOver = function (ev) {
             ev.preventDefault();
         };
+        _this.showDragOverlay = new rxjs_1.BehaviorSubject(false);
+        _this.onDragEnter = function () { return _this.showDragOverlay.next(true); };
         return _this;
     }
     Layout.prototype.componentDidMount = function () {
@@ -122,10 +141,57 @@ var Layout = /** @class */ (function (_super) {
         var layout = this.plugin.layout.state;
         var controls = ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.controls) || {};
         var viewport = ((_c = (_b = this.plugin.spec.components) === null || _b === void 0 ? void 0 : _b.viewport) === null || _c === void 0 ? void 0 : _c.view) || DefaultViewport;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-plugin', onDrop: this.onDrop, onDragOver: this.onDragOver }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.layoutClassName }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequence_1.SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || left_panel_1.LeftPanelControls), layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper), layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)] }), void 0), !((_d = this.plugin.spec.components) === null || _d === void 0 ? void 0 : _d.hideTaskOverlay) && (0, jsx_runtime_1.jsx)(task_1.OverlayTaskProgress, {}, void 0)] }), void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-plugin' }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequence_1.SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || left_panel_1.LeftPanelControls), layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper), layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)] }), void 0), !((_d = this.plugin.spec.components) === null || _d === void 0 ? void 0 : _d.hideTaskOverlay) && (0, jsx_runtime_1.jsx)(task_1.OverlayTaskProgress, {}, void 0), (0, jsx_runtime_1.jsx)(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay }, void 0)] }), void 0) }), void 0);
     };
     return Layout;
 }(base_1.PluginUIComponent));
+function dropFiles(ev, plugin, showDragOverlay) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    showDragOverlay.next(false);
+    var files = [];
+    if (ev.dataTransfer.items) {
+        // Use DataTransferItemList interface to access the file(s)
+        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+            if (ev.dataTransfer.items[i].kind !== 'file')
+                continue;
+            var file = ev.dataTransfer.items[i].getAsFile();
+            if (file)
+                files.push(file);
+        }
+    }
+    else {
+        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+            var file = ev.dataTransfer.files[0];
+            if (file)
+                files.push(file);
+        }
+    }
+    var sessions = files.filter(function (f) {
+        var fn = f.name.toLowerCase();
+        return fn.endsWith('.molx') || fn.endsWith('.molj');
+    });
+    if (sessions.length > 0) {
+        commands_1.PluginCommands.State.Snapshots.OpenFile(plugin, { file: sessions[0] });
+    }
+    else {
+        plugin.runTask(plugin.state.data.applyAction(file_1.OpenFiles, {
+            files: files.map(function (f) { return assets_1.Asset.File(f); }),
+            format: { name: 'auto', params: {} },
+            visuals: true
+        }));
+    }
+}
+function DragOverlay(_a) {
+    var plugin = _a.plugin, showDragOverlay = _a.showDragOverlay;
+    var show = (0, use_behavior_1.useBehavior)(showDragOverlay);
+    var preventDrag = function (e) {
+        e.dataTransfer.dropEffect = 'copy';
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-drag-drop-overlay', style: { display: show ? 'flex' : 'none' }, onDragEnter: preventDrag, onDragOver: preventDrag, onDragLeave: function () { return showDragOverlay.next(false); }, onDrop: function (e) { return dropFiles(e, plugin, showDragOverlay); } }, { children: "Upload File(s)" }), void 0);
+}
 var ControlsWrapper = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(ControlsWrapper, _super);
     function ControlsWrapper() {

package/lib/commonjs/mol-repr/shape/loci/angle.d.ts

@@ -38,6 +38,7 @@ export declare const AngleParams: {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
     ignoreLight: PD.BooleanParam;
     sectorOpacity: PD.Numeric;
@@ -47,6 +48,8 @@ export declare const AngleParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    bumpFrequency: PD.Numeric;
+    bumpAmplitude: PD.Numeric;
     lineSizeAttenuation: PD.BooleanParam;
     linesSize: PD.Numeric;
     dashLength: PD.Numeric;

package/lib/commonjs/mol-repr/shape/loci/common.d.ts

@@ -38,6 +38,7 @@ export declare const LociLabelTextParams: {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type LociLabelTextParams = typeof LociLabelTextParams;

package/lib/commonjs/mol-repr/shape/loci/dihedral.d.ts

@@ -38,6 +38,7 @@ export declare const DihedralParams: {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
     ignoreLight: PD.BooleanParam;
     sectorOpacity: PD.Numeric;
@@ -47,6 +48,8 @@ export declare const DihedralParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    bumpFrequency: PD.Numeric;
+    bumpAmplitude: PD.Numeric;
     lineSizeAttenuation: PD.BooleanParam;
     linesSize: PD.Numeric;
     dashLength: PD.Numeric;

package/lib/commonjs/mol-repr/shape/loci/distance.d.ts

@@ -39,6 +39,7 @@ export declare const DistanceParams: {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
     lineSizeAttenuation: PD.BooleanParam;
     linesColor: PD.Color;

package/lib/commonjs/mol-repr/shape/loci/label.d.ts

@@ -42,6 +42,7 @@ export declare const LabelParams: {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type LabelParams = typeof LabelParams;

package/lib/commonjs/mol-repr/shape/loci/orientation.d.ts

@@ -19,11 +19,14 @@ export declare const OrientationParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    bumpFrequency: PD.Numeric;
+    bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
     quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type OrientationParams = typeof OrientationParams;

package/lib/commonjs/mol-repr/shape/loci/plane.d.ts

@@ -18,11 +18,14 @@ export declare const PlaneParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    bumpFrequency: PD.Numeric;
+    bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
     quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type PlaneParams = typeof PlaneParams;

package/lib/commonjs/mol-repr/shape/model/unitcell.d.ts

@@ -21,11 +21,14 @@ export declare const UnitcellParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    bumpFrequency: PD.Numeric;
+    bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
     quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type UnitcellParams = typeof UnitcellParams;

package/lib/commonjs/mol-repr/structure/complex-visual.d.ts

@@ -47,11 +47,14 @@ export declare const ComplexMeshParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    bumpFrequency: PD.Numeric;
+    bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
     quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type ComplexMeshParams = typeof ComplexMeshParams;
@@ -66,11 +69,14 @@ export declare const ComplexCylindersParams: {
     doubleSided: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    bumpFrequency: PD.Numeric;
+    bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
     quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type ComplexCylindersParams = typeof ComplexCylindersParams;
@@ -87,6 +93,7 @@ export declare const ComplexLinesParams: {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type ComplexLinesParams = typeof ComplexLinesParams;
@@ -120,6 +127,7 @@ export declare const ComplexTextParams: {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type ComplexTextParams = typeof ComplexTextParams;
@@ -157,6 +165,7 @@ export declare const ComplexDirectVolumeParams: {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type ComplexDirectVolumeParams = typeof ComplexDirectVolumeParams;
@@ -171,11 +180,14 @@ export declare const ComplexTextureMeshParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    bumpFrequency: PD.Numeric;
+    bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
     quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 export declare type ComplexTextureMeshParams = typeof ComplexTextureMeshParams;