molstar 3.0.0-dev.6 → 3.0.0

package/lib/commonjs/mol-plugin-state/animation/built-in/camera-spin.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
@@ -15,11 +15,11 @@ var model_1 = require("../model");
 var _dir = (0, vec3_1.Vec3)(), _axis = (0, vec3_1.Vec3)(), _rot = (0, quat_1.Quat)();
 exports.AnimateCameraSpin = model_1.PluginStateAnimation.create({
     name: 'built-in.animate-camera-spin',
-    display: { name: 'Camera Spin' },
+    display: { name: 'Camera Spin', description: 'Spin the 3D scene around the x-axis in view space' },
     isExportable: true,
     params: function () { return ({
         durationInMs: param_definition_1.ParamDefinition.Numeric(4000, { min: 100, max: 20000, step: 100 }),
-        speed: param_definition_1.ParamDefinition.Numeric(1, { min: 1, max: 10, step: 1 }, { description: 'How many times to spin in the specified dutation.' }),
+        speed: param_definition_1.ParamDefinition.Numeric(1, { min: 1, max: 10, step: 1 }, { description: 'How many times to spin in the specified duration.' }),
         direction: param_definition_1.ParamDefinition.Select('cw', [['cw', 'Clockwise'], ['ccw', 'Counter Clockwise']], { cycle: true })
     }); },
     initialState: function (_, ctx) { var _a; return ({ snapshot: (_a = ctx.canvas3d) === null || _a === void 0 ? void 0 : _a.camera.getSnapshot() }); },
@@ -40,11 +40,9 @@ exports.AnimateCameraSpin = model_1.PluginStateAnimation.create({
                 if (snapshot.radiusMax < 0.0001) {
                     return [2 /*return*/, { kind: 'finished' }];
                 }
-                phase = (0, interpolate_1.clamp)(t.current / ctx.params.durationInMs, 0, 1);
-                if (phase >= 0.99999) {
-                    (_a = ctx.plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.requestCameraReset({ snapshot: snapshot, durationMs: 0 });
-                    return [2 /*return*/, { kind: 'finished' }];
-                }
+                phase = t.animation
+                    ? ((_a = t.animation) === null || _a === void 0 ? void 0 : _a.currentFrame) / (t.animation.frameCount + 1)
+                    : (0, interpolate_1.clamp)(t.current / ctx.params.durationInMs, 0, 1);
                 angle = 2 * Math.PI * phase * ctx.params.speed * (ctx.params.direction === 'ccw' ? -1 : 1);
                 vec3_1.Vec3.sub(_dir, snapshot.position, snapshot.target);
                 vec3_1.Vec3.normalize(_axis, snapshot.up);
@@ -52,6 +50,9 @@ exports.AnimateCameraSpin = model_1.PluginStateAnimation.create({
                 vec3_1.Vec3.transformQuat(_dir, _dir, _rot);
                 position = vec3_1.Vec3.add((0, vec3_1.Vec3)(), snapshot.target, _dir);
                 (_b = ctx.plugin.canvas3d) === null || _b === void 0 ? void 0 : _b.requestCameraReset({ snapshot: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, snapshot), { position: position }), durationMs: 0 });
+                if (phase >= 0.99999) {
+                    return [2 /*return*/, { kind: 'finished' }];
+                }
                 return [2 /*return*/, { kind: 'next', state: animState }];
             });
         });

package/lib/commonjs/mol-plugin-state/animation/model.d.ts

@@ -56,6 +56,10 @@ declare namespace PluginStateAnimation {
     interface Time {
         lastApplied: number;
         current: number;
+        animation?: {
+            currentFrame: number;
+            frameCount: number;
+        };
     }
     type ApplyResult<S> = {
         kind: 'finished';

package/lib/commonjs/mol-plugin-state/builder/structure/hierarchy-preset.d.ts

@@ -28,7 +28,7 @@ export declare namespace TrajectoryHierarchyPresetProvider {
                 [x: string]: any;
             }>;
         }>> | undefined>;
-        representationPreset: PD.Base<"auto" | "empty" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined>;
+        representationPreset: PD.Base<"auto" | "empty" | "illustrative" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined>;
     };
 }
 export declare const PresetTrajectoryHierarchy: {
@@ -41,7 +41,7 @@ export declare const PresetTrajectoryHierarchy: {
             autoAttach: any;
             properties: any;
         }>> | undefined;
-        representationPreset: "auto" | "empty" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
+        representationPreset: "auto" | "empty" | "illustrative" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
         model: PD.Normalize<PD.Normalize<{
             modelIndex: any;
         }>> | undefined;
@@ -86,7 +86,7 @@ export declare const PresetTrajectoryHierarchy: {
             autoAttach: any;
             properties: any;
         }>> | undefined;
-        representationPreset: "auto" | "empty" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
+        representationPreset: "auto" | "empty" | "illustrative" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
         useDefaultIfSingleModel: boolean | undefined;
         representationPresetParams: PD.Normalize<{
             ignoreHydrogens: any;
@@ -116,7 +116,7 @@ export declare const PresetTrajectoryHierarchy: {
             autoAttach: any;
             properties: any;
         }>> | undefined;
-        representationPreset: "auto" | "empty" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
+        representationPreset: "auto" | "empty" | "illustrative" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
         model: PD.Normalize<PD.Normalize<{
             modelIndex: any;
         }>> | undefined;
@@ -137,7 +137,7 @@ export declare const PresetTrajectoryHierarchy: {
             autoAttach: any;
             properties: any;
         }>> | undefined;
-        representationPreset: "auto" | "empty" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
+        representationPreset: "auto" | "empty" | "illustrative" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
         model: PD.Normalize<PD.Normalize<{
             modelIndex: any;
         }>> | undefined;
@@ -158,7 +158,7 @@ export declare const PresetTrajectoryHierarchy: {
             autoAttach: any;
             properties: any;
         }>> | undefined;
-        representationPreset: "auto" | "empty" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
+        representationPreset: "auto" | "empty" | "illustrative" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
         model: PD.Normalize<PD.Normalize<{
             modelIndex: any;
         }>> | undefined;

package/lib/commonjs/mol-plugin-state/builder/structure/hierarchy.d.ts

@@ -23,7 +23,7 @@ export declare class TrajectoryHierarchyBuilder {
             autoAttach: any;
             properties: any;
         }>> | undefined;
-        representationPreset: "auto" | "empty" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
+        representationPreset: "auto" | "empty" | "illustrative" | "atomic-detail" | "polymer-cartoon" | "polymer-and-ligand" | "protein-and-nucleic" | "coarse-surface" | undefined;
         model: PD.Normalize<PD.Normalize<{
             modelIndex: any;
         }>> | undefined;

package/lib/commonjs/mol-plugin-state/builder/structure/representation-preset.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 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>
@@ -13,6 +13,7 @@ import { PluginContext } from '../../../mol-plugin/context';
 import { StateObjectRef, StateObjectSelector } from '../../../mol-state';
 import { StaticStructureComponentType } from '../../helpers/structure-component';
 import { StructureSelectionQueries as Q } from '../../helpers/structure-selection-query';
+import { Color } from '../../../mol-util/color';
 export interface StructureRepresentationPresetProvider<P = any, S extends _Result = _Result> extends PresetProvider<PluginStateObject.Molecule.Structure, P, S> {
 }
 export declare function StructureRepresentationPresetProvider<P, S extends _Result>(repr: StructureRepresentationPresetProvider<P, S>): StructureRepresentationPresetProvider<P, S>;
@@ -31,9 +32,9 @@ export declare namespace StructureRepresentationPresetProvider {
         ignoreHydrogens: PD.Base<boolean | undefined>;
         quality: PD.Base<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest" | undefined>;
         theme: PD.Base<PD.Normalize<{
-            globalName: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "entity-id" | undefined;
+            globalName: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "entity-id" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "volume-value" | undefined;
             carbonColor: "element-symbol" | "chain-id" | "operator-name" | undefined;
-            symmetryColor: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "entity-id" | undefined;
+            symmetryColor: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "entity-id" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "volume-value" | undefined;
             focus: PD.Normalize<{
                 name: any;
                 params: any;
@@ -44,8 +45,8 @@ export declare namespace StructureRepresentationPresetProvider {
     function reprBuilder(plugin: PluginContext, params: CommonParams, structure?: Structure): {
         update: import("../../../mol-state/state/builder").StateBuilder.Root;
         builder: import("./representation").StructureRepresentationBuilder;
-        color: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "entity-id" | undefined;
-        symmetryColor: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "entity-id" | undefined;
+        color: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "entity-id" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "volume-value" | undefined;
+        symmetryColor: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "entity-id" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "volume-value" | undefined;
         typeParams: {
             quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
             ignoreHydrogens: boolean;
@@ -77,6 +78,127 @@ export declare namespace StructureRepresentationPresetProvider {
             }>, "operator-name">>;
             saturation: PD.Numeric;
             lightness: PD.Numeric;
+            colors: PD.Mapped<PD.NamedParams<PD.Normalize<unknown>, "default"> | PD.NamedParams<PD.Normalize<{
+                H: Color;
+                D: Color;
+                T: Color;
+                HE: Color;
+                LI: Color;
+                BE: Color;
+                B: Color;
+                C: Color;
+                N: Color;
+                O: Color;
+                F: Color;
+                NE: Color;
+                NA: Color;
+                MG: Color;
+                AL: Color;
+                SI: Color;
+                P: Color;
+                S: Color;
+                CL: Color;
+                AR: Color;
+                K: Color;
+                CA: Color;
+                SC: Color;
+                TI: Color;
+                V: Color;
+                CR: Color;
+                MN: Color;
+                FE: Color;
+                CO: Color;
+                NI: Color;
+                CU: Color;
+                ZN: Color;
+                GA: Color;
+                GE: Color;
+                AS: Color;
+                SE: Color;
+                BR: Color;
+                KR: Color;
+                RB: Color;
+                SR: Color;
+                Y: Color;
+                ZR: Color;
+                NB: Color;
+                MO: Color;
+                TC: Color;
+                RU: Color;
+                RH: Color;
+                PD: Color;
+                AG: Color;
+                CD: Color;
+                IN: Color;
+                SN: Color;
+                SB: Color;
+                TE: Color;
+                I: Color;
+                XE: Color;
+                CS: Color;
+                BA: Color;
+                LA: Color;
+                CE: Color;
+                PR: Color;
+                ND: Color;
+                PM: Color;
+                SM: Color;
+                EU: Color;
+                GD: Color;
+                TB: Color;
+                DY: Color;
+                HO: Color;
+                ER: Color;
+                TM: Color;
+                YB: Color;
+                LU: Color;
+                HF: Color;
+                TA: Color;
+                W: Color;
+                RE: Color;
+                OS: Color;
+                IR: Color;
+                PT: Color;
+                AU: Color;
+                HG: Color;
+                TL: Color;
+                PB: Color;
+                BI: Color;
+                PO: Color;
+                AT: Color;
+                RN: Color;
+                FR: Color;
+                RA: Color;
+                AC: Color;
+                TH: Color;
+                PA: Color;
+                U: Color;
+                NP: Color;
+                PU: Color;
+                AM: Color;
+                CM: Color;
+                BK: Color;
+                CF: Color;
+                ES: Color;
+                FM: Color;
+                MD: Color;
+                NO: Color;
+                LR: Color;
+                RF: Color;
+                DB: Color;
+                SG: Color;
+                BH: Color;
+                HS: Color;
+                MT: Color;
+                DS: Color;
+                RG: Color;
+                CN: Color;
+                UUT: Color;
+                FL: Color;
+                UUP: Color;
+                LV: Color;
+                UUH: Color;
+            }>, "custom">>;
         }>>;
     };
     function updateFocusRepr<T extends ColorTheme.BuiltIn>(plugin: PluginContext, structure: Structure, themeName: T | undefined, themeParams: ColorTheme.BuiltInParams<T> | undefined): Promise<void>;
@@ -241,6 +363,28 @@ export declare const PresetStructureRepresentations: {
             lipid: StateObjectSelector<PluginStateObject.Molecule.Structure.Representation3D, import("../../../mol-state/transformer").StateTransformer<import("../../../mol-state/object").StateObject<any, import("../../../mol-state/object").StateObject.Type<any>>, import("../../../mol-state/object").StateObject<any, import("../../../mol-state/object").StateObject.Type<any>>, any>>;
         };
     }>;
+    illustrative: StructureRepresentationPresetProvider<{
+        showCarbohydrateSymbol: boolean;
+        ignoreHydrogens: boolean | undefined;
+        quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest" | undefined;
+        theme: PD.Normalize<{
+            globalName: any;
+            carbonColor: any;
+            symmetryColor: any;
+            focus: any;
+        }> | undefined;
+    }, {
+        components?: undefined;
+        representations?: undefined;
+    } | {
+        components: {
+            all: StateObjectSelector<PluginStateObject.Molecule.Structure, import("../../../mol-state/transformer").StateTransformer<import("../../../mol-state/object").StateObject<any, import("../../../mol-state/object").StateObject.Type<any>>, import("../../../mol-state/object").StateObject<any, import("../../../mol-state/object").StateObject.Type<any>>, any>> | undefined;
+            branched: undefined;
+        };
+        representations: {
+            all: StateObjectSelector<PluginStateObject.Molecule.Structure.Representation3D, import("../../../mol-state/transformer").StateTransformer<import("../../../mol-state/object").StateObject<any, import("../../../mol-state/object").StateObject.Type<any>>, import("../../../mol-state/object").StateObject<any, import("../../../mol-state/object").StateObject.Type<any>>, any>>;
+        };
+    }>;
 };
 export declare type PresetStructureRepresentations = typeof PresetStructureRepresentations;
 export {};

package/lib/commonjs/mol-plugin-state/builder/structure/representation-preset.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 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>
@@ -21,6 +21,8 @@ var operator_name_1 = require("../../../mol-theme/color/operator-name");
 var index_pair_1 = require("../../../mol-model-formats/structure/property/bonds/index-pair");
 var struct_conn_1 = require("../../../mol-model-formats/structure/property/bonds/struct_conn");
 var type_helpers_1 = require("../../../mol-util/type-helpers");
+var color_1 = require("../../../mol-util/color");
+var postprocessing_1 = require("../../../mol-canvas3d/passes/postprocessing");
 function StructureRepresentationPresetProvider(repr) { return repr; }
 exports.StructureRepresentationPresetProvider = StructureRepresentationPresetProvider;
 (function (StructureRepresentationPresetProvider) {
@@ -81,6 +83,14 @@ exports.StructureRepresentationPresetProvider = StructureRepresentationPresetPro
 var CommonParams = StructureRepresentationPresetProvider.CommonParams;
 var reprBuilder = StructureRepresentationPresetProvider.reprBuilder;
 var updateFocusRepr = StructureRepresentationPresetProvider.updateFocusRepr;
+function resetPostprocessingProps(plugin) {
+    if (plugin.canvas3d) {
+        var p = param_definition_1.ParamDefinition.getDefaultValues(postprocessing_1.PostprocessingParams);
+        plugin.canvas3d.setProps({
+            postprocessing: { outline: p.outline, occlusion: p.occlusion }
+        });
+    }
+}
 var auto = StructureRepresentationPresetProvider({
     id: 'preset-structure-representation-auto',
     display: {
@@ -120,6 +130,7 @@ var empty = StructureRepresentationPresetProvider({
     apply: function (ref, params, plugin) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
             return (0, tslib_1.__generator)(this, function (_a) {
+                resetPostprocessingProps(plugin);
                 return [2 /*return*/, {}];
             });
         });
@@ -194,6 +205,7 @@ var polymerAndLigand = StructureRepresentationPresetProvider({
                         return [4 /*yield*/, updateFocusRepr(plugin, structure, (_h = (_g = params.theme) === null || _g === void 0 ? void 0 : _g.focus) === null || _h === void 0 ? void 0 : _h.name, (_k = (_j = params.theme) === null || _j === void 0 ? void 0 : _j.focus) === null || _k === void 0 ? void 0 : _k.params)];
                     case 10:
                         _o.sent();
+                        resetPostprocessingProps(plugin);
                         return [2 /*return*/, { components: components, representations: representations }];
                 }
             });
@@ -245,6 +257,7 @@ var proteinAndNucleic = StructureRepresentationPresetProvider({
                         return [4 /*yield*/, updateFocusRepr(plugin, structure, (_b = (_a = params.theme) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.name, (_d = (_c = params.theme) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.params)];
                     case 4:
                         _g.sent();
+                        resetPostprocessingProps(plugin);
                         return [2 /*return*/, { components: components, representations: representations }];
                 }
             });
@@ -311,6 +324,7 @@ var coarseSurface = StructureRepresentationPresetProvider({
                         return [4 /*yield*/, updateFocusRepr(plugin, structure, (_b = (_a = params.theme) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.name, (_d = (_c = params.theme) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.params)];
                     case 4:
                         _g.sent();
+                        resetPostprocessingProps(plugin);
                         return [2 /*return*/, { components: components, representations: representations }];
                 }
             });
@@ -354,6 +368,7 @@ var polymerCartoon = StructureRepresentationPresetProvider({
                         return [4 /*yield*/, updateFocusRepr(plugin, structure, (_b = (_a = params.theme) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.name, (_d = (_c = params.theme) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.params)];
                     case 3:
                         _g.sent();
+                        resetPostprocessingProps(plugin);
                         return [2 /*return*/, { components: components, representations: representations }];
                 }
             });
@@ -431,6 +446,62 @@ var atomicDetail = StructureRepresentationPresetProvider({
                         return [4 /*yield*/, updateFocusRepr(plugin, structure, (_c = (_b = (_a = params.theme) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : color, (_f = (_e = (_d = params.theme) === null || _d === void 0 ? void 0 : _d.focus) === null || _e === void 0 ? void 0 : _e.params) !== null && _f !== void 0 ? _f : colorParams)];
                     case 5:
                         _o.sent();
+                        resetPostprocessingProps(plugin);
+                        return [2 /*return*/, { components: components, representations: representations }];
+                }
+            });
+        });
+    }
+});
+var illustrative = StructureRepresentationPresetProvider({
+    id: 'preset-structure-representation-illustrative',
+    display: {
+        name: 'Illustrative', group: 'Miscellaneous',
+        description: '...'
+    },
+    params: function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, CommonParams), { showCarbohydrateSymbol: param_definition_1.ParamDefinition.Boolean(false) })); },
+    apply: function (ref, params, plugin) {
+        var _a, _b, _c, _d, _e;
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var structureCell, components, structure, _f, update, builder, typeParams, color, representations;
+            var _g;
+            return (0, tslib_1.__generator)(this, function (_h) {
+                switch (_h.label) {
+                    case 0:
+                        structureCell = mol_state_1.StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+                        if (!structureCell)
+                            return [2 /*return*/, {}];
+                        _g = {};
+                        return [4 /*yield*/, presetStaticComponent(plugin, structureCell, 'all')];
+                    case 1:
+                        components = (_g.all = _h.sent(),
+                            _g.branched = undefined,
+                            _g);
+                        structure = structureCell.obj.data;
+                        _f = reprBuilder(plugin, params, structure), update = _f.update, builder = _f.builder, typeParams = _f.typeParams, color = _f.color;
+                        representations = {
+                            all: builder.buildRepresentation(update, components.all, { type: 'spacefill', typeParams: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, typeParams), { ignoreLight: true }), color: 'illustrative' }, { tag: 'all' }),
+                        };
+                        return [4 /*yield*/, update.commit({ revertOnError: true })];
+                    case 2:
+                        _h.sent();
+                        return [4 /*yield*/, updateFocusRepr(plugin, structure, (_c = (_b = (_a = params.theme) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : color, (_e = (_d = params.theme) === null || _d === void 0 ? void 0 : _d.focus) === null || _e === void 0 ? void 0 : _e.params)];
+                    case 3:
+                        _h.sent();
+                        if (plugin.canvas3d) {
+                            plugin.canvas3d.setProps({
+                                postprocessing: {
+                                    outline: {
+                                        name: 'on',
+                                        params: { scale: 1, color: (0, color_1.Color)(0x000000), threshold: 0.25 }
+                                    },
+                                    occlusion: {
+                                        name: 'on',
+                                        params: { bias: 0.9, blurKernelSize: 15, radius: 5, samples: 32 }
+                                    },
+                                }
+                            });
+                        }
                         return [2 /*return*/, { components: components, representations: representations }];
                 }
             });
@@ -452,6 +523,7 @@ exports.PresetStructureRepresentations = {
     'polymer-cartoon': polymerCartoon,
     'polymer-and-ligand': polymerAndLigand,
     'protein-and-nucleic': proteinAndNucleic,
-    'coarse-surface': coarseSurface
+    'coarse-surface': coarseSurface,
+    'illustrative': illustrative,
 };
 //# sourceMappingURL=representation-preset.js.map

package/lib/commonjs/mol-plugin-state/helpers/structure-clipping.d.ts

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

package/lib/commonjs/mol-plugin-state/helpers/structure-clipping.js

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

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

@@ -29,7 +29,7 @@ declare class PluginAnimationManager extends StatefulPluginComponent<PluginAnima
     updateCurrentParams(values: any): void;
     register(animation: PluginStateAnimation): void;
     play<P>(animation: PluginStateAnimation<P>, params: P): Promise<void>;
-    tick(t: number, isSynchronous?: boolean): Promise<void>;
+    tick(t: number, isSynchronous?: boolean, animation?: PluginAnimationManager.AnimationInfo): Promise<void>;
     private isStopped;
     private isApplying;
     start(): Promise<void>;
@@ -43,6 +43,10 @@ declare class PluginAnimationManager extends StatefulPluginComponent<PluginAnima
     constructor(context: PluginContext);
 }
 declare namespace PluginAnimationManager {
+    interface AnimationInfo {
+        currentFrame: number;
+        frameCount: number;
+    }
     interface Current {
         anim: PluginStateAnimation;
         params: PD.Params;

package/lib/commonjs/mol-plugin-state/manager/animation.js

@@ -115,7 +115,7 @@ var PluginAnimationManager = /** @class */ (function (_super) {
             });
         });
     };
-    PluginAnimationManager.prototype.tick = function (t, isSynchronous) {
+    PluginAnimationManager.prototype.tick = function (t, isSynchronous, animation) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
             return (0, tslib_1.__generator)(this, function (_a) {
                 switch (_a.label) {
@@ -123,8 +123,8 @@ var PluginAnimationManager = /** @class */ (function (_super) {
                         this.currentTime = t;
                         if (this.isStopped)
                             return [2 /*return*/];
-                        if (!isSynchronous) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.applyFrame()];
+                        if (!(isSynchronous || animation)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.applyFrame(animation)];
                     case 1:
                         _a.sent();
                         return [3 /*break*/, 3];
@@ -223,7 +223,7 @@ var PluginAnimationManager = /** @class */ (function (_super) {
             });
         });
     };
-    PluginAnimationManager.prototype.applyFrame = function () {
+    PluginAnimationManager.prototype.applyFrame = function (animation) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
             var t, newState;
             return (0, tslib_1.__generator)(this, function (_a) {
@@ -232,7 +232,7 @@ var PluginAnimationManager = /** @class */ (function (_super) {
                         t = this.currentTime;
                         if (this._current.startedTime < 0)
                             this._current.startedTime = t;
-                        return [4 /*yield*/, this._current.anim.apply(this._current.state, { lastApplied: this._current.lastTime, current: t - this._current.startedTime }, { params: this._current.paramValues, plugin: this.context })];
+                        return [4 /*yield*/, this._current.anim.apply(this._current.state, { lastApplied: this._current.lastTime, current: t - this._current.startedTime, animation: animation }, { params: this._current.paramValues, plugin: this.context })];
                     case 1:
                         newState = _a.sent();
                         if (newState.kind === 'finished') {

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

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-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 { PluginContext } from '../../../mol-plugin/context';
 import { StateTransformer } from '../../../mol-state';
@@ -13,6 +14,7 @@ import { StatefulPluginComponent } from '../../component';
 import { StructureSelectionQuery } from '../../helpers/structure-selection-query';
 import { StructureRepresentation3D } from '../../transforms/representation';
 import { StructureHierarchyRef, StructureComponentRef, StructureRef, StructureRepresentationRef } from './hierarchy-state';
+import { Clip } from '../../../mol-util/clip';
 export { StructureComponentManager };
 interface StructureComponentManagerState {
     options: StructureComponentManager.Options;
@@ -63,6 +65,16 @@ declare namespace StructureComponentManager {
             roughness: number;
             bumpiness: number;
         }>>;
+        clipObjects: PD.Group<PD.Normalize<{
+            variant: Clip.Variant;
+            objects: PD.Normalize<{
+                type: any;
+                invert: any;
+                position: any;
+                rotation: any;
+                scale: any;
+            }>[];
+        }>>;
         interactions: PD.Group<PD.Normalize<{
             providers: PD.Normalize<{
                 ionic: any;