molstar 2.3.9 → 3.0.0-dev.2

package/lib/mol-plugin-ui/skin/colors/blue.scss

@@ -1,24 +1,24 @@
-$default-background:         #2D3E50;
-$font-color:                 #EDF1F2; 
-$hover-font-color:           #3B9AD9;
-$entity-current-font-color:  #FFFFFF;
-$msp-btn-remove-background:      #BF3A31;
-$msp-btn-remove-hover-font-color:#ffffff;
-$msp-btn-commit-on-font-color:   #ffffff; 
-$entity-badge-font-color:    #ccd4e0;
-
-// used in LOG
-$log-message:          #0CCA5D;
-$log-info:             #5E3673;
-$log-warning:          #FCC937;
-$log-error:            #FD354B;
-
-$logo-background: rgba(0,0,0,0.75);
-
-@function color-lower-contrast($color, $amount) {
-    @return darken($color, $amount);
-}
-
-@function color-increase-contrast($color, $amount) {
-    @return lighten($color, $amount);
+$default-background:         #2D3E50;
+$font-color:                 #EDF1F2; 
+$hover-font-color:           #3B9AD9;
+$entity-current-font-color:  #FFFFFF;
+$msp-btn-remove-background:      #BF3A31;
+$msp-btn-remove-hover-font-color:#ffffff;
+$msp-btn-commit-on-font-color:   #ffffff; 
+$entity-badge-font-color:    #ccd4e0;
+
+// used in LOG
+$log-message:          #0CCA5D;
+$log-info:             #5E3673;
+$log-warning:          #FCC937;
+$log-error:            #FD354B;
+
+$logo-background: rgba(0,0,0,0.75);
+
+@function color-lower-contrast($color, $amount) {
+    @return darken($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+    @return lighten($color, $amount);
 }

package/lib/mol-plugin-ui/skin/colors/dark.scss

@@ -1,24 +1,24 @@
-$default-background:         #111318;
-$font-color:                 #ccd4e0;
-$hover-font-color:           #51A2FB;
-$entity-current-font-color:  #68BEFD;
-$msp-btn-remove-background:      #DE0A28;
-$msp-btn-remove-hover-font-color:#F2F4F7;
-$msp-btn-commit-on-font-color:   #68BEFD;
-$entity-badge-font-color:    #ccd4e0;
-
-// used in LOG
-$log-message:          #0CCA5D;
-$log-info:             #5E3673;
-$log-warning:          #FCC937;
-$log-error:            #FD354B;
-
-$logo-background: rgba(0,0,0,0.75);
-
-@function color-lower-contrast($color, $amount) {
-    @return darken($color, $amount);
-}
-
-@function color-increase-contrast($color, $amount) {
-    @return lighten($color, $amount);
+$default-background:         #111318;
+$font-color:                 #ccd4e0;
+$hover-font-color:           #51A2FB;
+$entity-current-font-color:  #68BEFD;
+$msp-btn-remove-background:      #DE0A28;
+$msp-btn-remove-hover-font-color:#F2F4F7;
+$msp-btn-commit-on-font-color:   #68BEFD;
+$entity-badge-font-color:    #ccd4e0;
+
+// used in LOG
+$log-message:          #0CCA5D;
+$log-info:             #5E3673;
+$log-warning:          #FCC937;
+$log-error:            #FD354B;
+
+$logo-background: rgba(0,0,0,0.75);
+
+@function color-lower-contrast($color, $amount) {
+    @return darken($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+    @return lighten($color, $amount);
 }

package/lib/mol-plugin-ui/skin/colors/light.scss

@@ -1,30 +1,30 @@
-// this is complement of the dark theme
-
-@function compl($color) {
-    @return rgb(255 - red($color), 255 - green($color), 255 - blue($color));
-}
-
-$default-background:         compl(#111318);
-$font-color:                 compl(#ccd4e0);
-$hover-font-color:           compl(#51A2FB);
-$entity-current-font-color:  compl(#68BEFD);
-$msp-btn-commit-on-font-color:   compl(#68BEFD);
-$entity-badge-font-color:    lighten(#ccd4e0,10%);
-$msp-btn-remove-background:      #DE0A28;
-$msp-btn-remove-hover-font-color:#F2F4F7;
-
-// used in LOG
-$log-message:          #0CCA5D;
-$log-info:             #5E3673;
-$log-warning:          #FCC937;
-$log-error:            #FD354B;
-
-$logo-background: compl(#111318);
-
-@function color-lower-contrast($color, $amount) {
-    @return lighten($color, $amount);
-}
-
-@function color-increase-contrast($color, $amount) {
-    @return darken($color, $amount);
+// this is complement of the dark theme
+
+@function compl($color) {
+    @return rgb(255 - red($color), 255 - green($color), 255 - blue($color));
+}
+
+$default-background:         compl(#111318);
+$font-color:                 compl(#ccd4e0);
+$hover-font-color:           compl(#51A2FB);
+$entity-current-font-color:  compl(#68BEFD);
+$msp-btn-commit-on-font-color:   compl(#68BEFD);
+$entity-badge-font-color:    lighten(#ccd4e0,10%);
+$msp-btn-remove-background:      #DE0A28;
+$msp-btn-remove-hover-font-color:#F2F4F7;
+
+// used in LOG
+$log-message:          #0CCA5D;
+$log-info:             #5E3673;
+$log-warning:          #FCC937;
+$log-error:            #FD354B;
+
+$logo-background: compl(#111318);
+
+@function color-lower-contrast($color, $amount) {
+    @return lighten($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+    @return darken($color, $amount);
 }

package/lib/mol-plugin-ui/skin/dark.scss

@@ -1,2 +1,2 @@
-@import 'colors/dark';
+@import 'colors/dark';
 @import 'base/base';

package/lib/mol-plugin-ui/skin/light.scss

@@ -1,2 +1,2 @@
-@import 'colors/light';
+@import 'colors/light';
 @import 'base/base';

package/lib/mol-plugin-ui/state/common.js

@@ -91,25 +91,26 @@ var TransformControlBase = /** @class */ (function (_super) {
             }
         };
         _this.apply = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a;
-            var _b, _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
+            var e_1;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         this.clearAutoApply();
                         this.setState({ busy: true });
-                        _d.label = 1;
+                        _c.label = 1;
                     case 1:
-                        _d.trys.push([1, 3, 4, 5]);
+                        _c.trys.push([1, 3, 4, 5]);
                         return [4 /*yield*/, this.applyAction()];
                     case 2:
-                        _d.sent();
+                        _c.sent();
                         return [3 /*break*/, 5];
                     case 3:
-                        _a = _d.sent();
+                        e_1 = _c.sent();
+                        console.error(e_1);
                         return [3 /*break*/, 5];
                     case 4:
-                        (_c = (_b = this.props).onApply) === null || _c === void 0 ? void 0 : _c.call(_b);
+                        (_b = (_a = this.props).onApply) === null || _b === void 0 ? void 0 : _b.call(_a);
                         this.busy.next(false);
                         return [7 /*endfinally*/];
                     case 5: return [2 /*return*/];

package/lib/mol-plugin-ui/state/snapshots.js

@@ -198,7 +198,8 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
                         return [3 /*break*/, 3];
                     case 2:
                         e_1 = _a.sent();
-                        this.plugin.log.error('Fetching Remote Snapshots: ' + e_1);
+                        console.error(e_1);
+                        this.plugin.log.error('Error fetching remote snapshots');
                         if (this._mounted)
                             this.setState({ entries: OrderedMap(), isBusy: false });
                         return [3 /*break*/, 3];
@@ -257,9 +258,9 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
             });
         }); };
         _this.remove = function (e) { return __awaiter(_this, void 0, void 0, function () {
-            var id, entry, _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var id, entry, e_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
                         id = e.currentTarget.getAttribute('data-id');
                         if (!id)
@@ -268,15 +269,16 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
                         if (!entry)
                             return [2 /*return*/];
                         this.setState({ entries: this.state.entries.remove(id) });
-                        _b.label = 1;
+                        _a.label = 1;
                     case 1:
-                        _b.trys.push([1, 3, , 4]);
+                        _a.trys.push([1, 3, , 4]);
                         return [4 /*yield*/, fetch(entry.removeUrl)];
                     case 2:
-                        _b.sent();
+                        _a.sent();
                         return [3 /*break*/, 4];
                     case 3:
-                        _a = _b.sent();
+                        e_2 = _a.sent();
+                        console.error(e_2);
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
                 }

package/lib/mol-plugin-ui/structure/measurements.d.ts

@@ -33,7 +33,7 @@ export declare class MeasurementControls extends PurePluginUIComponent<{}, {
 }> {
     state: {
         isBusy: boolean;
-        action: "options" | "add" | undefined;
+        action: "add" | "options" | undefined;
     };
     componentDidMount(): void;
     componentWillUnmount(): void;

package/lib/mol-plugin-ui/structure/selection.js

@@ -342,7 +342,8 @@ function ResidueListSelectionHelper(_a) {
             plugin.managers.structure.selection.fromCompiledQuery(modifier, query, false);
         }
         catch (e) {
-            plugin.log.error("Failed to create selection: ".concat(e));
+            console.error(e);
+            plugin.log.error('Failed to create selection');
         }
     };
     return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: ResidueListIdTypeParams, values: state, onChangeValues: setState, onEnter: apply }, void 0), _jsxs(Button, __assign({ className: 'msp-btn-commit msp-btn-commit-on', disabled: state.identifiers.trim().length === 0, onClick: apply, style: { marginTop: '1px' } }, { children: [capitalize(modifier), " Selection"] }), void 0)] }, void 0);

package/lib/mol-plugin-ui/viewport/simple-settings.js

@@ -54,11 +54,10 @@ var SimpleSettingsParams = {
         transparent: PD.Boolean(false)
     }, { pivot: 'color' }),
     lighting: PD.Group({
-        renderStyle: Canvas3DParams.renderer.params.style,
         occlusion: Canvas3DParams.postprocessing.params.occlusion,
         outline: Canvas3DParams.postprocessing.params.outline,
         fog: Canvas3DParams.cameraFog,
-    }, { pivot: 'renderStyle' }),
+    }, { isFlat: true }),
     clipping: PD.Group(__assign(__assign({}, Canvas3DParams.cameraClipping.params), Canvas3DParams.renderer.params.clip.params), { pivot: 'radius' }),
     layout: PD.MultiSelect([], PD.objectToOptions(LayoutOptions)),
 };
@@ -105,10 +104,9 @@ var SimpleSettingsMapping = ParamMapping({
                 transparent: canvas.transparentBackground
             },
             lighting: {
-                renderStyle: renderer.style,
                 occlusion: canvas.postprocessing.occlusion,
                 outline: canvas.postprocessing.outline,
-                fog: canvas.cameraFog
+                fog: canvas.cameraFog,
             },
             clipping: __assign(__assign({}, canvas.cameraClipping), canvas.renderer.clip)
         };
@@ -120,7 +118,6 @@ var SimpleSettingsMapping = ParamMapping({
         canvas.camera = s.camera;
         canvas.transparentBackground = s.background.transparent;
         canvas.renderer.backgroundColor = s.background.color;
-        canvas.renderer.style = s.lighting.renderStyle;
         canvas.postprocessing.occlusion = s.lighting.occlusion;
         canvas.postprocessing.outline = s.lighting.outline;
         canvas.cameraFog = s.lighting.fog;

package/lib/mol-repr/representation.d.ts

@@ -20,6 +20,7 @@ import { Mat4 } from '../mol-math/linear-algebra';
 import { BaseGeometry } from '../mol-geo/geometry/base';
 import { CustomProperty } from '../mol-model-props/common/custom-property';
 import { Clipping } from '../mol-theme/clipping';
+import { Substance } from '../mol-theme/substance';
 export declare type RepresentationProps = {
     [k: string]: any;
 };
@@ -90,6 +91,7 @@ interface Representation<D, P extends PD.Params = {}, S extends Representation.S
     /** Number of addressable groups in all visuals of the representation */
     readonly groupCount: number;
     readonly renderObjects: ReadonlyArray<GraphicsRenderObject>;
+    readonly geometryVersion: number;
     readonly props: Readonly<PD.Values<P>>;
     readonly params: Readonly<P>;
     readonly state: Readonly<S>;
@@ -125,6 +127,8 @@ declare namespace Representation {
         overpaint: Overpaint;
         /** Per group transparency applied to the representation's renderobjects */
         transparency: Transparency;
+        /** Per group material applied to the representation's renderobjects */
+        substance: Substance;
         /** Bit mask of per group clipping applied to the representation's renderobjects */
         clipping: Clipping;
         /** Controls if the representation's renderobjects are synced automatically with GPU or not */
@@ -146,6 +150,14 @@ declare namespace Representation {
     type Def<D, P extends PD.Params = {}, S extends State = State> = {
         [k: string]: RepresentationFactory<D, P, S>;
     };
+    class GeometryState {
+        private curr;
+        private next;
+        private _version;
+        get version(): number;
+        add(id: number, version: number): void;
+        snapshot(): void;
+    }
     function createMulti<D, P extends PD.Params = {}, S extends State = State>(label: string, ctx: RepresentationContext, getParams: RepresentationParamsGetter<D, P>, stateBuilder: StateBuilder<S>, reprDefs: Def<D, P>): Representation<D, P, S>;
     function fromRenderObject(label: string, renderObject: GraphicsRenderObject): Representation<GraphicsRenderObject, BaseGeometry.Params>;
 }

package/lib/mol-repr/representation.js

@@ -19,6 +19,9 @@ import { getQualityProps } from './util';
 import { BaseGeometry } from '../mol-geo/geometry/base';
 import { Visual } from './visual';
 import { Clipping } from '../mol-theme/clipping';
+import { SetUtils } from '../mol-util/set';
+import { cantorPairing } from '../mol-data/util';
+import { Substance } from '../mol-theme/substance';
 export var RepresentationProvider;
 (function (RepresentationProvider) {
     function getDetaultParams(r, ctx, data) {
@@ -115,7 +118,7 @@ var Representation;
         Loci.Empty = { loci: EmptyLoci };
     })(Loci = Representation.Loci || (Representation.Loci = {}));
     function createState() {
-        return { visible: true, alphaFactor: 1, pickable: true, colorOnly: false, syncManually: false, transform: Mat4.identity(), overpaint: Overpaint.Empty, transparency: Transparency.Empty, clipping: Clipping.Empty, markerActions: MarkerActions.All };
+        return { visible: true, alphaFactor: 1, pickable: true, colorOnly: false, syncManually: false, transform: Mat4.identity(), overpaint: Overpaint.Empty, transparency: Transparency.Empty, substance: Substance.Empty, clipping: Clipping.Empty, markerActions: MarkerActions.All };
     }
     Representation.createState = createState;
     function updateState(state, update) {
@@ -131,6 +134,8 @@ var Representation;
             state.overpaint = update.overpaint;
         if (update.transparency !== undefined)
             state.transparency = update.transparency;
+        if (update.substance !== undefined)
+            state.substance = update.substance;
         if (update.clipping !== undefined)
             state.clipping = update.clipping;
         if (update.syncManually !== undefined)
@@ -143,7 +148,7 @@ var Representation;
     Representation.updateState = updateState;
     Representation.StateBuilder = { create: createState, update: updateState };
     Representation.Empty = {
-        label: '', groupCount: 0, renderObjects: [], props: {}, params: {}, updated: new Subject(), state: createState(), theme: Theme.createEmpty(),
+        label: '', groupCount: 0, renderObjects: [], geometryVersion: -1, props: {}, params: {}, updated: new Subject(), state: createState(), theme: Theme.createEmpty(),
         createOrUpdate: function () { return Task.constant('', undefined); },
         setState: function () { },
         setTheme: function () { },
@@ -151,10 +156,38 @@ var Representation;
         mark: function () { return false; },
         destroy: function () { }
     };
+    var GeometryState = /** @class */ (function () {
+        function GeometryState() {
+            this.curr = new Set();
+            this.next = new Set();
+            this._version = -1;
+        }
+        Object.defineProperty(GeometryState.prototype, "version", {
+            get: function () {
+                return this._version;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        GeometryState.prototype.add = function (id, version) {
+            this.next.add(cantorPairing(id, version));
+        };
+        GeometryState.prototype.snapshot = function () {
+            var _a;
+            if (!SetUtils.areEqual(this.curr, this.next)) {
+                this._version += 1;
+            }
+            _a = [this.next, this.curr], this.curr = _a[0], this.next = _a[1];
+            this.next.clear();
+        };
+        return GeometryState;
+    }());
+    Representation.GeometryState = GeometryState;
     function createMulti(label, ctx, getParams, stateBuilder, reprDefs) {
         var _this = this;
         var version = 0;
         var updated = new Subject();
+        var geometryState = new GeometryState();
         var currentState = stateBuilder.create();
         var currentTheme = Theme.createEmpty();
         var currentParams;
@@ -194,6 +227,7 @@ var Representation;
                 }
                 return renderObjects;
             },
+            get geometryVersion() { return geometryState.version; },
             get props() { return currentProps; },
             get params() { return currentParams; },
             createOrUpdate: function (props, data) {
@@ -215,16 +249,20 @@ var Representation;
                                 i = 0, il = reprList.length;
                                 _a.label = 1;
                             case 1:
-                                if (!(i < il)) return [3 /*break*/, 4];
+                                if (!(i < il)) return [3 /*break*/, 5];
                                 if (!(!visuals || visuals.includes(reprMap[i]))) return [3 /*break*/, 3];
                                 return [4 /*yield*/, reprList[i].createOrUpdate(currentProps, currentData).runInContext(runtime)];
                             case 2:
                                 _a.sent();
                                 _a.label = 3;
                             case 3:
+                                geometryState.add(i, reprList[i].geometryVersion);
+                                _a.label = 4;
+                            case 4:
                                 ++i;
                                 return [3 /*break*/, 1];
-                            case 4:
+                            case 5:
+                                geometryState.snapshot();
                                 updated.next(version++);
                                 return [2 /*return*/];
                         }
@@ -254,7 +292,7 @@ var Representation;
             setState: function (state) {
                 stateBuilder.update(currentState, state);
                 for (var i = 0, il = reprList.length; i < il; ++i) {
-                    reprList[i].setState(currentState);
+                    reprList[i].setState(state); // only set the new (partial) state
                 }
             },
             setTheme: function (theme) {
@@ -275,6 +313,7 @@ var Representation;
         var _this = this;
         var version = 0;
         var updated = new Subject();
+        var geometryState = new GeometryState();
         var currentState = Representation.createState();
         var currentTheme = Theme.createEmpty();
         var currentParams = PD.clone(BaseGeometry.Params);
@@ -284,6 +323,7 @@ var Representation;
             updated: updated,
             get groupCount() { return renderObject.values.uGroupCount.ref.value; },
             get renderObjects() { return [renderObject]; },
+            get geometryVersion() { return geometryState.version; },
             get props() { return currentProps; },
             get params() { return currentParams; },
             createOrUpdate: function (props) {
@@ -293,6 +333,8 @@ var Representation;
                 return Task.create("Updating '".concat(label, "' representation"), function (runtime) { return __awaiter(_this, void 0, void 0, function () {
                     return __generator(this, function (_a) {
                         // TODO
+                        geometryState.add(0, renderObject.id);
+                        geometryState.snapshot();
                         updated.next(version++);
                         return [2 /*return*/];
                     });
@@ -323,6 +365,9 @@ var Representation;
                 if (state.transparency !== undefined) {
                     // TODO
                 }
+                if (state.substance !== undefined) {
+                    // TODO
+                }
                 if (state.transform !== undefined)
                     Visual.setTransform(renderObject, state.transform);
                 Representation.updateState(currentState, state);

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

@@ -27,14 +27,18 @@ export declare const AngleParams: {
     tether: PD.BooleanParam;
     tetherLength: PD.Numeric;
     tetherBaseWidth: PD.Numeric;
-    attachment: PD.Select<"middle-center" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-right" | "top-left" | "top-center" | "top-right">;
+    attachment: PD.Select<"bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-center" | "middle-right" | "top-left" | "top-center" | "top-right">;
     fontFamily: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontFamily>;
     fontQuality: PD.Select<number>;
     fontStyle: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontStyle>;
     fontVariant: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontVariant>;
     fontWeight: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontWeight>;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
+    material: PD.Group<PD.Normalize<{
+        metalness: number;
+        roughness: number;
+    }>>;
     ignoreLight: PD.BooleanParam;
     sectorOpacity: PD.Numeric;
     color: PD.Color;

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

@@ -27,13 +27,17 @@ export declare const LociLabelTextParams: {
     tether: PD.BooleanParam;
     tetherLength: PD.Numeric;
     tetherBaseWidth: PD.Numeric;
-    attachment: PD.Select<"middle-center" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-right" | "top-left" | "top-center" | "top-right">;
+    attachment: PD.Select<"bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-center" | "middle-right" | "top-left" | "top-center" | "top-right">;
     fontFamily: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontFamily>;
     fontQuality: PD.Select<number>;
     fontStyle: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontStyle>;
     fontVariant: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontVariant>;
     fontWeight: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontWeight>;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
+    material: PD.Group<PD.Normalize<{
+        metalness: number;
+        roughness: number;
+    }>>;
 };
 export declare type LociLabelTextParams = typeof LociLabelTextParams;

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

@@ -27,14 +27,18 @@ export declare const DihedralParams: {
     tether: PD.BooleanParam;
     tetherLength: PD.Numeric;
     tetherBaseWidth: PD.Numeric;
-    attachment: PD.Select<"middle-center" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-right" | "top-left" | "top-center" | "top-right">;
+    attachment: PD.Select<"bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-center" | "middle-right" | "top-left" | "top-center" | "top-right">;
     fontFamily: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontFamily>;
     fontQuality: PD.Select<number>;
     fontStyle: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontStyle>;
     fontVariant: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontVariant>;
     fontWeight: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontWeight>;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
+    material: PD.Group<PD.Normalize<{
+        metalness: number;
+        roughness: number;
+    }>>;
     ignoreLight: PD.BooleanParam;
     sectorOpacity: PD.Numeric;
     color: PD.Color;

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

@@ -10,7 +10,7 @@ export interface DistanceData {
     pairs: Loci.Bundle<2>[];
 }
 export declare const DistanceParams: {
-    visuals: PD.MultiSelect<"lines" | "text">;
+    visuals: PD.MultiSelect<"text" | "lines">;
     unitLabel: PD.Text<string>;
     borderWidth: PD.Numeric;
     customText: PD.Text<string>;
@@ -28,14 +28,18 @@ export declare const DistanceParams: {
     tether: PD.BooleanParam;
     tetherLength: PD.Numeric;
     tetherBaseWidth: PD.Numeric;
-    attachment: PD.Select<"middle-center" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-right" | "top-left" | "top-center" | "top-right">;
+    attachment: PD.Select<"bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-center" | "middle-right" | "top-left" | "top-center" | "top-right">;
     fontFamily: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontFamily>;
     fontQuality: PD.Select<number>;
     fontStyle: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontStyle>;
     fontVariant: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontVariant>;
     fontWeight: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontWeight>;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
+    material: PD.Group<PD.Normalize<{
+        metalness: number;
+        roughness: number;
+    }>>;
     lineSizeAttenuation: PD.BooleanParam;
     linesColor: PD.Color;
     linesSize: PD.Numeric;

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

@@ -31,14 +31,18 @@ export declare const LabelParams: {
     tether: PD.BooleanParam;
     tetherLength: PD.Numeric;
     tetherBaseWidth: PD.Numeric;
-    attachment: PD.Select<"middle-center" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-right" | "top-left" | "top-center" | "top-right">;
+    attachment: PD.Select<"bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-center" | "middle-right" | "top-left" | "top-center" | "top-right">;
     fontFamily: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontFamily>;
     fontQuality: PD.Select<number>;
     fontStyle: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontStyle>;
     fontVariant: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontVariant>;
     fontWeight: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontWeight>;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
+    material: PD.Group<PD.Normalize<{
+        metalness: number;
+        roughness: number;
+    }>>;
 };
 export declare type LabelParams = typeof LabelParams;
 export declare type LabelProps = PD.Values<LabelParams>;

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

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

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

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