molstar 3.2.0 → 3.4.0

package/lib/commonjs/extensions/zenodo/ui.js

@@ -0,0 +1,306 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZenodoImportUI = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+var file_1 = require("../../mol-plugin-state/actions/file");
+var structure_1 = require("../../mol-plugin-state/actions/structure");
+var volume_1 = require("../../mol-plugin-state/actions/volume");
+var coordinates_1 = require("../../mol-plugin-state/formats/coordinates");
+var topology_1 = require("../../mol-plugin-state/formats/topology");
+var trajectory_1 = require("../../mol-plugin-state/formats/trajectory");
+var volume_2 = require("../../mol-plugin-state/formats/volume");
+var base_1 = require("../../mol-plugin-ui/base");
+var common_1 = require("../../mol-plugin-ui/controls/common");
+var icons_1 = require("../../mol-plugin-ui/controls/icons");
+var parameters_1 = require("../../mol-plugin-ui/controls/parameters");
+var mol_util_1 = require("../../mol-util");
+var param_definition_1 = require("../../mol-util/param-definition");
+var ZenodoImportParams = {
+    record: param_definition_1.ParamDefinition.Text('', { description: 'Zenodo ID.' })
+};
+function createImportParams(files, plugin) {
+    var modelOpts = [];
+    var topologyOpts = [];
+    var coordinatesOpts = [];
+    var volumeOpts = [];
+    var compressedOpts = [];
+    var structureExts = new Map();
+    var coordinatesExts = new Map();
+    var topologyExts = new Map();
+    var volumeExts = new Map();
+    for (var _i = 0, _a = plugin.dataFormats.list; _i < _a.length; _i++) {
+        var _b = _a[_i], _c = _b.provider, category = _c.category, binaryExtensions = _c.binaryExtensions, stringExtensions = _c.stringExtensions, name_1 = _b.name;
+        if (category === trajectory_1.TrajectoryFormatCategory) {
+            if (binaryExtensions)
+                for (var _d = 0, binaryExtensions_1 = binaryExtensions; _d < binaryExtensions_1.length; _d++) {
+                    var e = binaryExtensions_1[_d];
+                    structureExts.set(e, { format: name_1, isBinary: true });
+                }
+            if (stringExtensions)
+                for (var _e = 0, stringExtensions_1 = stringExtensions; _e < stringExtensions_1.length; _e++) {
+                    var e = stringExtensions_1[_e];
+                    structureExts.set(e, { format: name_1, isBinary: false });
+                }
+        }
+        else if (category === volume_2.VolumeFormatCategory) {
+            if (binaryExtensions)
+                for (var _f = 0, binaryExtensions_2 = binaryExtensions; _f < binaryExtensions_2.length; _f++) {
+                    var e = binaryExtensions_2[_f];
+                    volumeExts.set(e, { format: name_1, isBinary: true });
+                }
+            if (stringExtensions)
+                for (var _g = 0, stringExtensions_2 = stringExtensions; _g < stringExtensions_2.length; _g++) {
+                    var e = stringExtensions_2[_g];
+                    volumeExts.set(e, { format: name_1, isBinary: false });
+                }
+        }
+        else if (category === coordinates_1.CoordinatesFormatCategory) {
+            if (binaryExtensions)
+                for (var _h = 0, binaryExtensions_3 = binaryExtensions; _h < binaryExtensions_3.length; _h++) {
+                    var e = binaryExtensions_3[_h];
+                    coordinatesExts.set(e, { format: name_1, isBinary: true });
+                }
+            if (stringExtensions)
+                for (var _j = 0, stringExtensions_3 = stringExtensions; _j < stringExtensions_3.length; _j++) {
+                    var e = stringExtensions_3[_j];
+                    coordinatesExts.set(e, { format: name_1, isBinary: false });
+                }
+        }
+        else if (category === topology_1.TopologyFormatCategory) {
+            if (binaryExtensions)
+                for (var _k = 0, binaryExtensions_4 = binaryExtensions; _k < binaryExtensions_4.length; _k++) {
+                    var e = binaryExtensions_4[_k];
+                    topologyExts.set(e, { format: name_1, isBinary: true });
+                }
+            if (stringExtensions)
+                for (var _l = 0, stringExtensions_4 = stringExtensions; _l < stringExtensions_4.length; _l++) {
+                    var e = stringExtensions_4[_l];
+                    topologyExts.set(e, { format: name_1, isBinary: false });
+                }
+        }
+    }
+    for (var _m = 0, files_1 = files; _m < files_1.length; _m++) {
+        var file = files_1[_m];
+        var label = "".concat(file.key, " (").concat((0, mol_util_1.formatBytes)(file.size), ")");
+        if (structureExts.has(file.type)) {
+            var _o = structureExts.get(file.type), format = _o.format, isBinary = _o.isBinary;
+            modelOpts.push(["".concat(file.links.self, "|").concat(format, "|").concat(isBinary), label]);
+            topologyOpts.push(["".concat(file.links.self, "|").concat(format, "|").concat(isBinary), label]);
+        }
+        else if (volumeExts.has(file.type)) {
+            var _p = volumeExts.get(file.type), format = _p.format, isBinary = _p.isBinary;
+            volumeOpts.push(["".concat(file.links.self, "|").concat(format, "|").concat(isBinary), label]);
+        }
+        else if (topologyExts.has(file.type)) {
+            var _q = topologyExts.get(file.type), format = _q.format, isBinary = _q.isBinary;
+            topologyOpts.push(["".concat(file.links.self, "|").concat(format, "|").concat(isBinary), label]);
+        }
+        else if (coordinatesExts.has(file.type)) {
+            var _r = coordinatesExts.get(file.type), format = _r.format, isBinary = _r.isBinary;
+            coordinatesOpts.push(["".concat(file.links.self, "|").concat(format, "|").concat(isBinary), label]);
+        }
+        else if (file.type === 'zip') {
+            compressedOpts.push(["".concat(file.links.self, "|").concat(file.type, "|true"), label]);
+        }
+    }
+    var params = {};
+    var defaultType = '';
+    if (modelOpts.length) {
+        defaultType = 'structure';
+        params.structure = param_definition_1.ParamDefinition.Select(modelOpts[0][0], modelOpts);
+    }
+    if (topologyOpts.length && coordinatesOpts.length) {
+        if (!defaultType)
+            defaultType = 'trajectory';
+        params.trajectory = param_definition_1.ParamDefinition.Group({
+            topology: param_definition_1.ParamDefinition.Select(topologyOpts[0][0], topologyOpts),
+            coordinates: param_definition_1.ParamDefinition.Select(coordinatesOpts[0][0], coordinatesOpts),
+        }, { isFlat: true });
+    }
+    if (volumeOpts.length) {
+        if (!defaultType)
+            defaultType = 'volume';
+        params.volume = param_definition_1.ParamDefinition.Select(volumeOpts[0][0], volumeOpts);
+    }
+    if (compressedOpts.length) {
+        if (!defaultType)
+            defaultType = 'compressed';
+        params.compressed = param_definition_1.ParamDefinition.Select(compressedOpts[0][0], compressedOpts);
+    }
+    return {
+        type: param_definition_1.ParamDefinition.MappedStatic(defaultType, Object.keys(params).length ? params : { '': param_definition_1.ParamDefinition.EmptyGroup() })
+    };
+}
+var ZenodoImportUI = /** @class */ (function (_super) {
+    tslib_1.__extends(ZenodoImportUI, _super);
+    function ZenodoImportUI() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.recordParamsOnChange = function (values) {
+            _this.setState({ recordValues: values });
+        };
+        _this.importParamsOnChange = function (values) {
+            _this.setState({ importValues: values });
+        };
+        _this.loadRecord = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var record, importParams, e_1;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        this.setState({ busy: true });
+                        return [4 /*yield*/, this.plugin.runTask(this.plugin.fetch({ url: "https://zenodo.org/api/records/".concat(this.state.recordValues.record), type: 'json' }))];
+                    case 1:
+                        record = _a.sent();
+                        importParams = createImportParams(record.files, this.plugin);
+                        this.setState({
+                            record: record,
+                            files: record.files,
+                            busy: false,
+                            importValues: param_definition_1.ParamDefinition.getDefaultValues(importParams),
+                            importParams: importParams
+                        });
+                        return [3 /*break*/, 3];
+                    case 2:
+                        e_1 = _a.sent();
+                        console.error(e_1);
+                        this.plugin.log.error("Failed to load Zenodo record '".concat(this.state.recordValues.record, "'"));
+                        this.setState({ busy: false });
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.loadFile = function (values) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var t, defaultParams, _a, url, format, isBinary, _b, topologyUrl, topologyFormat, topologyIsBinary, _c, coordinatesUrl, coordinatesFormat, coordinatesIsBinary, _d, url, format, isBinary, _e, url, format, isBinary, e_2;
+            return tslib_1.__generator(this, function (_f) {
+                switch (_f.label) {
+                    case 0:
+                        _f.trys.push([0, 9, 10, 11]);
+                        this.setState({ busy: true });
+                        t = values.type;
+                        if (!(t.name === 'structure')) return [3 /*break*/, 2];
+                        defaultParams = structure_1.DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj, this.plugin);
+                        _a = t.params.split('|'), url = _a[0], format = _a[1], isBinary = _a[2];
+                        return [4 /*yield*/, this.plugin.runTask(this.plugin.state.data.applyAction(structure_1.DownloadStructure, {
+                                source: {
+                                    name: 'url',
+                                    params: {
+                                        url: url,
+                                        format: format,
+                                        isBinary: isBinary === 'true',
+                                        options: defaultParams.source.params.options,
+                                    }
+                                }
+                            }))];
+                    case 1:
+                        _f.sent();
+                        return [3 /*break*/, 8];
+                    case 2:
+                        if (!(t.name === 'trajectory')) return [3 /*break*/, 4];
+                        _b = t.params.topology.split('|'), topologyUrl = _b[0], topologyFormat = _b[1], topologyIsBinary = _b[2];
+                        _c = t.params.coordinates.split('|'), coordinatesUrl = _c[0], coordinatesFormat = _c[1], coordinatesIsBinary = _c[2];
+                        return [4 /*yield*/, this.plugin.runTask(this.plugin.state.data.applyAction(structure_1.LoadTrajectory, {
+                                source: {
+                                    name: 'url',
+                                    params: {
+                                        model: {
+                                            url: topologyUrl,
+                                            format: topologyFormat,
+                                            isBinary: topologyIsBinary === 'true',
+                                        },
+                                        coordinates: {
+                                            url: coordinatesUrl,
+                                            format: coordinatesFormat,
+                                            isBinary: coordinatesIsBinary === 'true',
+                                        },
+                                    }
+                                }
+                            }))];
+                    case 3:
+                        _f.sent();
+                        return [3 /*break*/, 8];
+                    case 4:
+                        if (!(t.name === 'volume')) return [3 /*break*/, 6];
+                        _d = t.params.split('|'), url = _d[0], format = _d[1], isBinary = _d[2];
+                        return [4 /*yield*/, this.plugin.runTask(this.plugin.state.data.applyAction(volume_1.DownloadDensity, {
+                                source: {
+                                    name: 'url',
+                                    params: {
+                                        url: url,
+                                        format: format,
+                                        isBinary: isBinary === 'true',
+                                    }
+                                }
+                            }))];
+                    case 5:
+                        _f.sent();
+                        return [3 /*break*/, 8];
+                    case 6:
+                        if (!(t.name === 'compressed')) return [3 /*break*/, 8];
+                        _e = t.params.split('|'), url = _e[0], format = _e[1], isBinary = _e[2];
+                        return [4 /*yield*/, this.plugin.runTask(this.plugin.state.data.applyAction(file_1.DownloadFile, {
+                                url: url,
+                                format: format,
+                                isBinary: isBinary === 'true',
+                                visuals: true
+                            }))];
+                    case 7:
+                        _f.sent();
+                        _f.label = 8;
+                    case 8: return [3 /*break*/, 11];
+                    case 9:
+                        e_2 = _f.sent();
+                        console.error(e_2);
+                        this.plugin.log.error("Failed to load Zenodo file");
+                        return [3 /*break*/, 11];
+                    case 10:
+                        this.setState({ busy: false });
+                        return [7 /*endfinally*/];
+                    case 11: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.clearRecord = function () {
+            _this.setState({
+                importValues: undefined,
+                importParams: undefined,
+                record: undefined,
+                files: undefined
+            });
+        };
+        return _this;
+    }
+    ZenodoImportUI.prototype.defaultState = function () {
+        return {
+            header: 'Zenodo Import',
+            isCollapsed: true,
+            brand: { accent: 'cyan', svg: icons_1.OpenInBrowserSvg },
+            recordValues: param_definition_1.ParamDefinition.getDefaultValues(ZenodoImportParams),
+            importValues: undefined,
+            importParams: undefined,
+            record: undefined,
+            files: undefined,
+        };
+    };
+    ZenodoImportUI.prototype.renderLoadRecord = function () {
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginBottom: 10 } }, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: ZenodoImportParams, values: this.state.recordValues, onChangeValues: this.recordParamsOnChange, isDisabled: this.state.busy }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.loadRecord, style: { marginTop: 1 }, disabled: this.state.busy || !this.state.recordValues.record }, { children: "Load Record" }))] }));
+    };
+    ZenodoImportUI.prototype.renderRecordInfo = function (record) {
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginBottom: 10 } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", { children: ["Record ", "".concat(record.id), ": ", (0, jsx_runtime_1.jsx)("i", { children: "".concat(record.metadata.title) })] }) })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.clearRecord, style: { marginTop: 1 }, disabled: this.state.busy }, { children: "Clear" }))] }));
+    };
+    ZenodoImportUI.prototype.renderImportFile = function (params, values) {
+        var _this = this;
+        return values.type.name ? (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginBottom: 10 } }, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: params, values: this.state.importValues, onChangeValues: this.importParamsOnChange, isDisabled: this.state.busy }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: function () { return _this.loadFile(values); }, style: { marginTop: 1 }, disabled: this.state.busy }, { children: "Import File" }))] })) : (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-help-text', style: { marginBottom: 10 } }, { children: (0, jsx_runtime_1.jsx)("div", { children: "No supported files" }) }));
+    };
+    ZenodoImportUI.prototype.renderControls = function () {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!this.state.record ? this.renderLoadRecord() : null, this.state.record ? this.renderRecordInfo(this.state.record) : null, this.state.importParams && this.state.importValues ? this.renderImportFile(this.state.importParams, this.state.importValues) : null] });
+    };
+    return ZenodoImportUI;
+}(base_1.CollapsableControls));
+exports.ZenodoImportUI = ZenodoImportUI;

package/lib/commonjs/mol-canvas3d/camera/stereo.js

@@ -25,7 +25,7 @@ var StereoCamera = /** @class */ (function () {
         this.parent = parent;
         this.left = new EyeCamera();
         this.right = new EyeCamera();
-        this.props = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, exports.DefaultStereoCameraProps), props);
+        this.props = tslib_1.__assign(tslib_1.__assign({}, exports.DefaultStereoCameraProps), props);
     }
     Object.defineProperty(StereoCamera.prototype, "viewport", {
         get: function () {
@@ -126,4 +126,3 @@ function update(camera, props, left, right) {
     linear_algebra_1.Mat4.mul(right.projectionView, right.projection, right.view);
     linear_algebra_1.Mat4.invert(right.inverseProjectionView, right.projectionView);
 }
-//# sourceMappingURL=stereo.js.map

package/lib/commonjs/mol-canvas3d/camera/transition.js

@@ -100,4 +100,3 @@ exports.CameraTransitionManager = CameraTransitionManager;
     CameraTransitionManager.defaultTransition = defaultTransition;
 })(CameraTransitionManager || (CameraTransitionManager = {}));
 exports.CameraTransitionManager = CameraTransitionManager;
-//# sourceMappingURL=transition.js.map

package/lib/commonjs/mol-canvas3d/camera/util.js

@@ -22,7 +22,7 @@ exports.Viewport = Viewport;
     }
     Viewport.create = create;
     function clone(viewport) {
-        return (0, tslib_1.__assign)({}, viewport);
+        return tslib_1.__assign({}, viewport);
     }
     Viewport.clone = clone;
     function copy(target, source) {
@@ -91,4 +91,3 @@ function cameraUnproject(out, point, viewport, inverseProjectionView) {
     return linear_algebra_1.Vec3.transformMat4(out, out, inverseProjectionView);
 }
 exports.cameraUnproject = cameraUnproject;
-//# sourceMappingURL=util.js.map

package/lib/commonjs/mol-canvas3d/camera.js

@@ -11,6 +11,7 @@ var linear_algebra_1 = require("../mol-math/linear-algebra");
 var util_1 = require("./camera/util");
 var transition_1 = require("./camera/transition");
 var rxjs_1 = require("rxjs");
+var type_helpers_1 = require("../mol-util/type-helpers");
 var tmpPos1 = (0, linear_algebra_1.Vec3)();
 var tmpPos2 = (0, linear_algebra_1.Vec3)();
 var tmpClip = (0, linear_algebra_1.Vec4)();
@@ -80,7 +81,7 @@ var Camera = /** @class */ (function () {
             case 'perspective':
                 updatePers(this);
                 break;
-            default: throw new Error('unknown camera mode');
+            default: (0, type_helpers_1.assertUnreachable)(this.state.mode);
         }
         var changed = !linear_algebra_1.Mat4.areEqual(this.projection, this.prevProjection, linear_algebra_1.EPSILON) || !linear_algebra_1.Mat4.areEqual(this.view, this.prevView, linear_algebra_1.EPSILON);
         if (changed) {
@@ -331,4 +332,3 @@ function updateClip(camera) {
     camera.fogNear = fogNear;
     camera.fogFar = fogFar;
 }
-//# sourceMappingURL=camera.js.map

package/lib/commonjs/mol-canvas3d/canvas3d.d.ts

@@ -63,6 +63,7 @@ export declare const Canvas3DParams: {
             radius: any;
             bias: any;
             blurKernelSize: any;
+            resolutionScale: any;
         }>, "on">;
         outline: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             scale: any;
@@ -215,6 +216,7 @@ export declare const DefaultCanvas3DParams: PD.Values<{
             radius: any;
             bias: any;
             blurKernelSize: any;
+            resolutionScale: any;
         }>, "on">;
         outline: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             scale: any;
@@ -394,7 +396,7 @@ interface Canvas3D {
     /** Sets drawPaused = false without starting the built in animation loop */
     resume(): void;
     identify(x: number, y: number): PickData | undefined;
-    mark(loci: Representation.Loci, action: MarkerAction, noDraw?: boolean): void;
+    mark(loci: Representation.Loci, action: MarkerAction): void;
     getLoci(pickingId: PickingId | undefined): Representation.Loci;
     notifyDidDraw: boolean;
     readonly didDraw: BehaviorSubject<now.Timestamp>;

package/lib/commonjs/mol-canvas3d/canvas3d.js

@@ -102,7 +102,7 @@ var Canvas3DContext;
     };
     function fromCanvas(canvas, attribs) {
         if (attribs === void 0) { attribs = {}; }
-        var a = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, Canvas3DContext.DefaultAttribs), attribs);
+        var a = tslib_1.__assign(tslib_1.__assign({}, Canvas3DContext.DefaultAttribs), attribs);
         var antialias = a.antialias, preserveDrawingBuffer = a.preserveDrawingBuffer, pixelScale = a.pixelScale, preferWebGl1 = a.preferWebGl1;
         var gl = (0, context_1.getGLContext)(canvas, {
             antialias: antialias,
@@ -190,7 +190,7 @@ var Canvas3D;
     function create(_a, props) {
         var webgl = _a.webgl, input = _a.input, passes = _a.passes, attribs = _a.attribs;
         if (props === void 0) { props = {}; }
-        var p = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, exports.DefaultCanvas3DParams), props);
+        var p = tslib_1.__assign(tslib_1.__assign({}, exports.DefaultCanvas3DParams), props);
         var reprRenderObjects = new Map();
         var reprUpdatedSubscriptions = new Map();
         var reprCount = new rxjs_1.BehaviorSubject(0);
@@ -243,8 +243,28 @@ var Canvas3D;
             }
             return { loci: loci, repr: repr };
         }
-        function mark(reprLoci, action, noDraw) {
-            if (noDraw === void 0) { noDraw = false; }
+        var markBuffer = [];
+        function mark(reprLoci, action) {
+            // NOTE: might try to optimize a case with opposite actions for the
+            //       same loci. Tho this might end up being more expensive (and error prone)
+            //       then just applying everything "naively".
+            markBuffer.push([reprLoci, action]);
+        }
+        function resolveMarking() {
+            var changed = false;
+            for (var _i = 0, markBuffer_1 = markBuffer; _i < markBuffer_1.length; _i++) {
+                var _a = markBuffer_1[_i], r = _a[0], l = _a[1];
+                changed = applyMark(r, l) || changed;
+            }
+            markBuffer = [];
+            if (changed) {
+                scene.update(void 0, true);
+                helper.handle.scene.update(void 0, true);
+                helper.camera.scene.update(void 0, true);
+            }
+            return changed;
+        }
+        function applyMark(reprLoci, action) {
             var repr = reprLoci.repr, loci = reprLoci.loci;
             var changed = false;
             if (repr) {
@@ -255,24 +275,9 @@ var Canvas3D;
                 changed = helper.camera.mark(loci, action) || changed;
                 reprRenderObjects.forEach(function (_, _repr) { changed = _repr.mark(loci, action) || changed; });
             }
-            if (changed) {
-                if (noDraw) {
-                    // Even with `noDraw` make sure changes will be rendered.
-                    // Note that with this calling mark (with or without `noDraw`) multiple times
-                    // during a JS event loop iteration will only result in a single render call.
-                    forceNextRender = true;
-                }
-                else {
-                    scene.update(void 0, true);
-                    helper.handle.scene.update(void 0, true);
-                    helper.camera.scene.update(void 0, true);
-                    var prevPickDirty = pickHelper.dirty;
-                    draw({ force: true, allowMulti: true });
-                    pickHelper.dirty = prevPickDirty; // marking does not change picking buffers
-                }
-            }
+            return changed;
         }
-        function render(force, allowMulti) {
+        function render(force) {
             if (webgl.isContextLost)
                 return false;
             var resized = false;
@@ -284,13 +289,14 @@ var Canvas3D;
             if (x > gl.drawingBufferWidth || x + width < 0 ||
                 y > gl.drawingBufferHeight || y + height < 0)
                 return false;
+            var markingUpdated = resolveMarking();
             var didRender = false;
             controls.update(currentTime);
             var cameraChanged = camera.update();
             var shouldRender = force || cameraChanged || resized || forceNextRender;
             forceNextRender = false;
-            var multiSampleChanged = multiSampleHelper.update(shouldRender, p.multiSample);
-            if (shouldRender || multiSampleChanged) {
+            var multiSampleChanged = multiSampleHelper.update(markingUpdated || shouldRender, p.multiSample);
+            if (shouldRender || multiSampleChanged || markingUpdated) {
                 var cam = camera;
                 if (p.camera.stereo.name === 'on') {
                     stereoCamera.update();
@@ -298,13 +304,14 @@ var Canvas3D;
                 }
                 var ctx = { renderer: renderer, camera: cam, scene: scene, helper: helper };
                 if (multi_sample_1.MultiSamplePass.isEnabled(p.multiSample)) {
-                    var forceOn = !cameraChanged && allowMulti && !controls.isAnimating;
+                    var forceOn = !cameraChanged && markingUpdated && !controls.isAnimating;
                     multiSampleHelper.render(ctx, p, true, forceOn);
                 }
                 else {
                     passes.draw.render(ctx, p, true);
                 }
-                pickHelper.dirty = true;
+                // if only marking has updated, do not set the flag to dirty
+                pickHelper.dirty = pickHelper.dirty || shouldRender;
                 didRender = true;
             }
             return didRender;
@@ -316,7 +323,7 @@ var Canvas3D;
         function draw(options) {
             if (drawPaused)
                 return;
-            if (render(!!(options === null || options === void 0 ? void 0 : options.force), !!(options === null || options === void 0 ? void 0 : options.allowMulti)) && notifyDidDraw) {
+            if (render(!!(options === null || options === void 0 ? void 0 : options.force)) && notifyDidDraw) {
                 didDraw.next((0, now_1.now)() - startTime);
             }
         }
@@ -390,8 +397,8 @@ var Canvas3D;
                 var duration = nextCameraResetDuration === undefined ? p.cameraResetDurationMs : nextCameraResetDuration;
                 var focus_1 = camera.getFocus(center, radius);
                 var next = typeof nextCameraResetSnapshot === 'function' ? nextCameraResetSnapshot(scene, camera) : nextCameraResetSnapshot;
-                var snapshot = next ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, focus_1), next) : focus_1;
-                camera.setState((0, tslib_1.__assign)((0, tslib_1.__assign)({}, snapshot), { radiusMax: scene.boundingSphere.radius }), duration);
+                var snapshot = next ? tslib_1.__assign(tslib_1.__assign({}, focus_1), next) : focus_1;
+                camera.setState(tslib_1.__assign(tslib_1.__assign({}, snapshot), { radiusMax: scene.boundingSphere.radius }), duration);
             }
             nextCameraResetDuration = void 0;
             nextCameraResetSnapshot = void 0;
@@ -515,8 +522,8 @@ var Canvas3D;
             return {
                 camera: {
                     mode: camera.state.mode,
-                    helper: (0, tslib_1.__assign)({}, helper.camera.props),
-                    stereo: (0, tslib_1.__assign)({}, p.camera.stereo),
+                    helper: tslib_1.__assign({}, helper.camera.props),
+                    stereo: tslib_1.__assign({}, p.camera.stereo),
                     manualReset: !!p.camera.manualReset
                 },
                 cameraFog: camera.state.fog > 0
@@ -526,14 +533,14 @@ var Canvas3D;
                 cameraResetDurationMs: p.cameraResetDurationMs,
                 transparentBackground: p.transparentBackground,
                 viewport: p.viewport,
-                postprocessing: (0, tslib_1.__assign)({}, p.postprocessing),
-                marking: (0, tslib_1.__assign)({}, p.marking),
-                multiSample: (0, tslib_1.__assign)({}, p.multiSample),
-                renderer: (0, tslib_1.__assign)({}, renderer.props),
-                trackball: (0, tslib_1.__assign)({}, controls.props),
-                interaction: (0, tslib_1.__assign)({}, interactionHelper.props),
-                debug: (0, tslib_1.__assign)({}, helper.debug.props),
-                handle: (0, tslib_1.__assign)({}, helper.handle.props),
+                postprocessing: tslib_1.__assign({}, p.postprocessing),
+                marking: tslib_1.__assign({}, p.marking),
+                multiSample: tslib_1.__assign({}, p.multiSample),
+                renderer: tslib_1.__assign({}, renderer.props),
+                trackball: tslib_1.__assign({}, controls.props),
+                interaction: tslib_1.__assign({}, interactionHelper.props),
+                debug: tslib_1.__assign({}, helper.debug.props),
+                handle: tslib_1.__assign({}, helper.handle.props),
             };
         }
         var contextRestoredSub = contextRestored.subscribe(function () {
@@ -711,6 +718,7 @@ var Canvas3D;
             },
             dispose: function () {
                 contextRestoredSub.unsubscribe();
+                markBuffer = [];
                 scene.clear();
                 helper.debug.clear();
                 controls.dispose();
@@ -752,4 +760,3 @@ var Canvas3D;
     Canvas3D.create = create;
 })(Canvas3D || (Canvas3D = {}));
 exports.Canvas3D = Canvas3D;
-//# sourceMappingURL=canvas3d.js.map

package/lib/commonjs/mol-canvas3d/controls/object.js

@@ -46,4 +46,3 @@ var ObjectControls;
     }
     ObjectControls.panDirection = panDirection;
 })(ObjectControls = exports.ObjectControls || (exports.ObjectControls = {}));
-//# sourceMappingURL=object.js.map

package/lib/commonjs/mol-canvas3d/controls/trackball.js

@@ -71,7 +71,7 @@ var TrackballControls;
 (function (TrackballControls) {
     function create(input, camera, props) {
         if (props === void 0) { props = {}; }
-        var p = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, param_definition_1.ParamDefinition.getDefaultValues(exports.TrackballControlsParams)), props);
+        var p = tslib_1.__assign(tslib_1.__assign({}, param_definition_1.ParamDefinition.getDefaultValues(exports.TrackballControlsParams)), props);
         var viewport = util_1.Viewport.clone(camera.viewport);
         var disposed = false;
         var dragSub = input.drag.subscribe(onDrag);
@@ -423,4 +423,3 @@ var TrackballControls;
     TrackballControls.create = create;
 })(TrackballControls || (TrackballControls = {}));
 exports.TrackballControls = TrackballControls;
-//# sourceMappingURL=trackball.js.map

package/lib/commonjs/mol-canvas3d/helper/bounding-sphere-helper.js

@@ -31,7 +31,7 @@ var BoundingSphereHelper = /** @class */ (function () {
         this.instancesData = new Map();
         this.scene = scene_1.Scene.create(ctx, render_item_1.GraphicsRenderVariantsBlended);
         this.parent = parent;
-        this._props = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, param_definition_1.ParamDefinition.getDefaultValues(exports.DebugHelperParams)), props);
+        this._props = tslib_1.__assign(tslib_1.__assign({}, param_definition_1.ParamDefinition.getDefaultValues(exports.DebugHelperParams)), props);
     }
     BoundingSphereHelper.prototype.update = function () {
         var _this = this;
@@ -154,4 +154,3 @@ function createBoundingSphereRenderObject(mesh, color, materialId, transform) {
     var values = mesh_1.Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform);
     return (0, render_object_1.createRenderObject)('mesh', values, { disposed: false, visible: true, alphaFactor: 1, pickable: false, colorOnly: false, opaque: false, writeDepth: false }, materialId);
 }
-//# sourceMappingURL=bounding-sphere-helper.js.map

package/lib/commonjs/mol-canvas3d/helper/camera-helper.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isCameraAxesLoci = exports.CameraHelper = exports.CameraHelperParams = void 0;
 var tslib_1 = require("tslib");
-var immer_1 = (0, tslib_1.__importDefault)(require("immer"));
+var immer_1 = tslib_1.__importDefault(require("immer"));
 var interval_1 = require("../../mol-data/int/interval");
 var cylinder_1 = require("../../mol-geo/geometry/mesh/builder/cylinder");
 var sphere_1 = require("../../mol-geo/geometry/mesh/builder/sphere");
@@ -25,7 +25,7 @@ var marker_action_1 = require("../../mol-util/marker-action");
 var param_definition_1 = require("../../mol-util/param-definition");
 var camera_1 = require("../camera");
 // TODO add scale line/grid
-var AxesParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), { alpha: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params.alpha), { defaultValue: 0.51 }), ignoreLight: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params.ignoreLight), { defaultValue: true }), colorX: param_definition_1.ParamDefinition.Color(names_1.ColorNames.red, { isEssential: true }), colorY: param_definition_1.ParamDefinition.Color(names_1.ColorNames.green, { isEssential: true }), colorZ: param_definition_1.ParamDefinition.Color(names_1.ColorNames.blue, { isEssential: true }), scale: param_definition_1.ParamDefinition.Numeric(0.33, { min: 0.1, max: 2, step: 0.1 }, { isEssential: true }) });
+var AxesParams = tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), { alpha: tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params.alpha), { defaultValue: 0.51 }), ignoreLight: tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params.ignoreLight), { defaultValue: true }), colorX: param_definition_1.ParamDefinition.Color(names_1.ColorNames.red, { isEssential: true }), colorY: param_definition_1.ParamDefinition.Color(names_1.ColorNames.green, { isEssential: true }), colorZ: param_definition_1.ParamDefinition.Color(names_1.ColorNames.blue, { isEssential: true }), scale: param_definition_1.ParamDefinition.Numeric(0.33, { min: 0.1, max: 2, step: 0.1 }, { isEssential: true }) });
 exports.CameraHelperParams = {
     axes: param_definition_1.ParamDefinition.MappedStatic('on', {
         on: param_definition_1.ParamDefinition.Group(AxesParams),
@@ -34,8 +34,8 @@ exports.CameraHelperParams = {
 };
 var CameraHelper = /** @class */ (function () {
     function CameraHelper(webgl, props) {
-        var _this = this;
         if (props === void 0) { props = {}; }
+        var _this = this;
         this.webgl = webgl;
         this.props = {
             axes: { name: 'off', params: {} }
@@ -69,13 +69,13 @@ var CameraHelper = /** @class */ (function () {
                 p.axes.name = props.axes.name;
                 if (props.axes.name === 'on') {
                     _this.scene.clear();
-                    var params = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props.axes.params), { scale: props.axes.params.scale * _this.webgl.pixelRatio });
+                    var params = tslib_1.__assign(tslib_1.__assign({}, props.axes.params), { scale: props.axes.params.scale * _this.webgl.pixelRatio });
                     _this.renderObject = createAxesRenderObject(params);
                     _this.scene.add(_this.renderObject);
                     _this.scene.commit();
                     linear_algebra_1.Vec3.set(_this.camera.position, 0, 0, params.scale * 200);
                     linear_algebra_1.Mat4.lookAt(_this.camera.view, _this.camera.position, _this.camera.target, _this.camera.up);
-                    p.axes.params = (0, tslib_1.__assign)({}, props.axes.params);
+                    p.axes.params = tslib_1.__assign({}, props.axes.params);
                 }
             }
         });
@@ -214,4 +214,3 @@ function createAxesRenderObject(props) {
     var shape = getAxesShape(props);
     return shape_1.Shape.createRenderObject(shape, props);
 }
-//# sourceMappingURL=camera-helper.js.map