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

package/lib/mol-model-props/integrative/cross-link-restraint/representation.d.ts

@@ -30,11 +30,14 @@ export declare const CrossLinkRestraintCylinderParams: {
     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 CrossLinkRestraintCylinderParams = typeof CrossLinkRestraintCylinderParams;
@@ -59,11 +62,14 @@ export declare const CrossLinkRestraintParams: {
     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 CrossLinkRestraintParams = typeof CrossLinkRestraintParams;
@@ -87,11 +93,14 @@ export declare function getCrossLinkRestraintParams(ctx: ThemeRegistryContext, s
     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 CrossLinkRestraintRepresentation = StructureRepresentation<CrossLinkRestraintParams>;
@@ -116,10 +125,13 @@ export declare const CrossLinkRestraintRepresentationProvider: StructureRepresen
     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;
     }>>;
 }, CrossLinkRestraint.Tag>;

package/lib/mol-plugin/behavior/dynamic/selection/structure-focus-representation.d.ts

@@ -24,6 +24,7 @@ declare const StructureFocusRepresentationParams: (plugin: PluginContext) => {
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;
+        bumpiness: number;
     }>>;
 };
 declare type StructureFocusRepresentationProps = PD.ValuesFor<ReturnType<typeof StructureFocusRepresentationParams>>;

package/lib/mol-plugin/behavior/dynamic/volume-streaming/model.d.ts

@@ -9,12 +9,12 @@ import { Volume } from '../../../../mol-model/volume';
 import { Structure } from '../../../../mol-model/structure';
 declare const VolumeServerInfo_base: {
     new (data: VolumeServerInfo.Data, props?: {
-        label: string; /** Precision data the server can show. */
+        /** Precision data the server can show. */
+        label: string;
         description?: string | undefined;
     } | undefined): {
         id: import("../../../../mol-util/uuid").UUID;
         type: PluginStateObject.TypeInfo;
-        /** The value are stored in blockSize^3 cubes */
         label: string;
         description?: string | undefined;
         data: VolumeServerInfo.Data;
@@ -23,7 +23,6 @@ declare const VolumeServerInfo_base: {
     is(obj?: import("../../../../mol-state/object").StateObject<any, import("../../../../mol-state/object").StateObject.Type<any>> | undefined): obj is {
         id: import("../../../../mol-util/uuid").UUID;
         type: PluginStateObject.TypeInfo;
-        /** The value are stored in blockSize^3 cubes */
         label: string;
         description?: string | undefined;
         data: VolumeServerInfo.Data;

package/lib/mol-plugin/commands.d.ts

@@ -232,6 +232,7 @@ export declare const PluginCommands: {
                     outline: import("../mol-util/param-definition").ParamDefinition.NamedParams<import("../mol-util/param-definition").ParamDefinition.Normalize<unknown>, "off"> | import("../mol-util/param-definition").ParamDefinition.NamedParams<import("../mol-util/param-definition").ParamDefinition.Normalize<{
                         scale: any;
                         threshold: any;
+                        color: any;
                     }>, "on">;
                     antialiasing: import("../mol-util/param-definition").ParamDefinition.NamedParams<import("../mol-util/param-definition").ParamDefinition.Normalize<unknown>, "off"> | import("../mol-util/param-definition").ParamDefinition.NamedParams<import("../mol-util/param-definition").ParamDefinition.Normalize<{
                         edgeThreshold: any;
@@ -329,6 +330,8 @@ export declare const PluginCommands: {
                         flipSided: any;
                         flatShaded: any;
                         xrayShaded: any;
+                        bumpFrequency: any;
+                        bumpAmplitude: any;
                         quality: any;
                         material: any;
                     }>, "on">;

package/lib/mol-plugin/config.d.ts

@@ -16,6 +16,7 @@ export declare class PluginConfigItem<T = any> {
     constructor(key: string, defaultValue?: T | undefined);
 }
 declare function item<T>(key: string, defaultValue?: T): PluginConfigItem<T>;
+export declare function preferWebGl1(): boolean;
 export declare const PluginConfig: {
     item: typeof item;
     General: {

package/lib/mol-plugin/config.js

@@ -16,12 +16,17 @@ var PluginConfigItem = /** @class */ (function () {
 }());
 export { PluginConfigItem };
 function item(key, defaultValue) { return new PluginConfigItem(key, defaultValue); }
-function preferWebGl1() {
+export function preferWebGl1() {
     if (typeof navigator === 'undefined' || typeof window === 'undefined')
         return false;
-    // WebGL2 isn't working in MacOS 12.0.1 Safari 15.1 (but is working in Safari tech preview)
+    // WebGL2 isn't working in MacOS 12.0.1 Safari 15.1, 15.2. It is working in Safari 15.4 tech preview, so disabling all versions before that.
     // prefer webgl 1 based on the userAgent substring
-    if (navigator.userAgent.indexOf('Version/15.1 Safari') > 0) {
+    var unpportedSafariVersions = [
+        'Version/15.1 Safari',
+        'Version/15.2 Safari',
+        'Version/15.3 Safari'
+    ];
+    if (unpportedSafariVersions.some(function (v) { return navigator.userAgent.indexOf(v) > 0; })) {
         return true;
     }
     // Check for iOS device which enabled WebGL2 recently but it doesn't seem

package/lib/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/mol-plugin/version.js

@@ -1,2 +1,2 @@
-export var PLUGIN_VERSION = '3.0.0-dev.3';
-export var PLUGIN_VERSION_DATE = new Date(typeof __MOLSTAR_DEBUG_TIMESTAMP__ !== 'undefined' ? __MOLSTAR_DEBUG_TIMESTAMP__ : 1638685340455);
+export var PLUGIN_VERSION = '3.0.0-dev.4';
+export var PLUGIN_VERSION_DATE = new Date(typeof __MOLSTAR_DEBUG_TIMESTAMP__ !== 'undefined' ? __MOLSTAR_DEBUG_TIMESTAMP__ : 1639488302617);

package/lib/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/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/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/mol-plugin-ui/controls/parameters.js

@@ -1,13 +1,14 @@
 import { __assign, __extends, __spreadArray } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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>
  */
 import * as React from 'react';
 import { Mat4, Vec3 } from '../../mol-math/linear-algebra';
+import { Asset } from '../../mol-util/assets';
 import { Color } from '../../mol-util/color';
 import { ColorListOptions, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName } from '../../mol-util/color/lists';
 import { memoize1, memoizeLatest } from '../../mol-util/memoize';
@@ -18,11 +19,10 @@ import { PluginUIComponent } from '../base';
 import { ActionMenu } from './action-menu';
 import { ColorOptions, ColorValueOption, CombinedColorControl } from './color';
 import { Button, ControlGroup, ControlRow, ExpandGroup, IconButton, TextInput, ToggleButton } from './common';
-import { Icon, HelpOutlineSvg, CheckSvg, ClearSvg, BookmarksOutlinedSvg, MoreHorizSvg, ArrowDropDownSvg, ArrowRightSvg, ArrowDownwardSvg, ArrowUpwardSvg, DeleteOutlinedSvg, TuneSvg } from './icons';
+import { ArrowDownwardSvg, ArrowDropDownSvg, ArrowRightSvg, ArrowUpwardSvg, BookmarksOutlinedSvg, CheckSvg, ClearSvg, DeleteOutlinedSvg, HelpOutlineSvg, Icon, MoreHorizSvg } from './icons';
 import { legendFor } from './legend';
 import { LineGraphComponent } from './line-graph/line-graph-component';
 import { Slider, Slider2 } from './slider';
-import { Asset } from '../../mol-util/assets';
 var ParameterControls = /** @class */ (function (_super) {
     __extends(ParameterControls, _super);
     function ParameterControls() {
@@ -1026,11 +1026,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 || camelCaseToWords(this.props.name);
-        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper' }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [_jsx(Icon, { svg: TuneSvg }, void 0), label, " Presets"] }), void 0) }), void 0), this.state.showPresets && _jsx(ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper' }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [_jsx(Icon, { svg: BookmarksOutlinedSvg }, void 0), label, " Presets"] }), void 0) }), void 0), this.state.showPresets && _jsx(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 _jsxs(_Fragment, { children: [_jsx("div", __assign({ className: 'msp-control-group-presets-wrapper' }, { children: _jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [_jsx(Icon, { svg: BookmarksOutlinedSvg }, void 0), "Presets"] }), void 0) }), void 0) }), void 0), this.state.showPresets && _jsx(ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }, void 0);
     };
     GroupControl.prototype.pivoted = function () {
         var key = this.props.param.pivot;
@@ -1047,7 +1052,7 @@ var GroupControl = /** @class */ (function (_super) {
             if (k !== key)
                 filtered[k] = params[k];
         }
-        return _jsxs("div", __assign({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }, void 0), _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.presets(), _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 _jsxs("div", __assign({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }, void 0), _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.pivotedPresets(), _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;
@@ -1064,7 +1069,7 @@ var GroupControl = /** @class */ (function (_super) {
         if (this.props.param.isFlat) {
             return controls;
         }
-        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper' }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded }, { children: [_jsx(Icon, { svg: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg }, void 0), label] }), void 0) }), void 0), this.state.isExpanded && _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.presets(), controls] }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper', style: { position: 'relative' } }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded }, { children: [_jsx(Icon, { svg: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg }, void 0), label] }), void 0) }), void 0), this.presets(), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: controls }), void 0)] }), void 0);
     };
     return GroupControl;
 }(React.PureComponent));

package/lib/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/mol-plugin-ui/hooks/use-behavior.js

@@ -1,33 +1,24 @@
 /**
- * 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>
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 // eslint-disable-next-line
 export function useBehavior(s) {
-    var _a = useState(s === null || s === void 0 ? void 0 : s.value), value = _a[0], setValue = _a[1];
+    var _a = useState({}), next = _a[1];
+    var current = useRef();
+    current.current = s === null || s === void 0 ? void 0 : s.value;
     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;
 }
 //# sourceMappingURL=use-behavior.js.map

package/lib/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/mol-plugin-ui/plugin.js

@@ -10,6 +10,10 @@ import { BackgroundTaskProgress, OverlayTaskProgress } from './task';
 import { Toasts } from './toast';
 import { Viewport, ViewportControls } from './viewport';
 import { PluginCommands } from '../mol-plugin/commands';
+import { OpenFiles } from '../mol-plugin-state/actions/file';
+import { Asset } from '../mol-util/assets';
+import { BehaviorSubject } from 'rxjs';
+import { useBehavior } from './hooks/use-behavior';
 var Plugin = /** @class */ (function (_super) {
     __extends(Plugin, _super);
     function Plugin() {
@@ -41,29 +45,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) {
+                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')) {
-                PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: file });
+            else {
+                _this.plugin.runTask(_this.plugin.state.data.applyAction(OpenFiles, {
+                    files: files.map(function (f) { return Asset.File(f); }),
+                    format: { name: 'auto', params: {} },
+                    visuals: true
+                }));
             }
         };
         _this.onDragOver = function (ev) {
             ev.preventDefault();
         };
+        _this.showDragOverlay = new BehaviorSubject(false);
+        _this.onDragEnter = function () { return _this.showDragOverlay.next(true); };
         return _this;
     }
     Layout.prototype.componentDidMount = function () {
@@ -119,10 +138,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 _jsx("div", __assign({ className: 'msp-plugin', onDrop: this.onDrop, onDragOver: this.onDragOver }, { children: _jsxs("div", __assign({ className: this.layoutClassName }, { children: [_jsxs("div", __assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || 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) && _jsx(OverlayTaskProgress, {}, void 0)] }), void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-plugin' }, { children: _jsxs("div", __assign({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [_jsxs("div", __assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || 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) && _jsx(OverlayTaskProgress, {}, void 0), _jsx(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay }, void 0)] }), void 0) }), void 0);
     };
     return Layout;
 }(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) {
+        PluginCommands.State.Snapshots.OpenFile(plugin, { file: sessions[0] });
+    }
+    else {
+        plugin.runTask(plugin.state.data.applyAction(OpenFiles, {
+            files: files.map(function (f) { return Asset.File(f); }),
+            format: { name: 'auto', params: {} },
+            visuals: true
+        }));
+    }
+}
+function DragOverlay(_a) {
+    var plugin = _a.plugin, showDragOverlay = _a.showDragOverlay;
+    var show = useBehavior(showDragOverlay);
+    var preventDrag = function (e) {
+        e.dataTransfer.dropEffect = 'copy';
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    return _jsx("div", __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) {
     __extends(ControlsWrapper, _super);
     function ControlsWrapper() {