molstar
Version:
A comprehensive macromolecular library.
168 lines • 8.27 kB
JavaScript
;
/**
* Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.init = void 0;
var tslib_1 = require("tslib");
require("./index.html");
var util_1 = require("../../mol-canvas3d/util");
var representation_1 = require("../../mol-repr/representation");
var canvas3d_1 = require("../../mol-canvas3d/canvas3d");
var label_1 = require("../../mol-theme/label");
var marker_action_1 = require("../../mol-util/marker-action");
var loci_1 = require("../../mol-model/loci");
var mol_task_1 = require("../../mol-task");
var mesh_1 = require("../../mol-geo/geometry/mesh/mesh");
var mesh_builder_1 = require("../../mol-geo/geometry/mesh/mesh-builder");
var linear_algebra_1 = require("../../mol-math/linear-algebra");
var sphere_1 = require("../../mol-geo/primitive/sphere");
var names_1 = require("../../mol-util/color/names");
var shape_1 = require("../../mol-model/shape");
var representation_2 = require("../../mol-repr/shape/representation");
var parent = document.getElementById('app');
parent.style.width = '100%';
parent.style.height = '100%';
var canvas = document.createElement('canvas');
parent.appendChild(canvas);
(0, util_1.resizeCanvas)(canvas, parent);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.fontFamily = 'sans-serif';
info.style.fontSize = '24pt';
info.style.bottom = '20px';
info.style.right = '20px';
info.style.color = 'white';
parent.appendChild(info);
var prevReprLoci = representation_1.Representation.Loci.Empty;
var canvas3d = canvas3d_1.Canvas3D.create(canvas3d_1.Canvas3DContext.fromCanvas(canvas));
canvas3d.animate();
canvas3d.input.move.subscribe(function (_a) {
var _b;
var x = _a.x, y = _a.y;
var pickingId = (_b = canvas3d.identify(x, y)) === null || _b === void 0 ? void 0 : _b.id;
var label = '';
if (pickingId) {
var reprLoci = canvas3d.getLoci(pickingId);
label = (0, label_1.lociLabel)(reprLoci.loci);
if (!representation_1.Representation.Loci.areEqual(prevReprLoci, reprLoci)) {
canvas3d.mark(prevReprLoci, marker_action_1.MarkerAction.RemoveHighlight);
canvas3d.mark(reprLoci, marker_action_1.MarkerAction.Highlight);
prevReprLoci = reprLoci;
}
}
else {
canvas3d.mark({ loci: loci_1.EveryLoci }, marker_action_1.MarkerAction.RemoveHighlight);
prevReprLoci = representation_1.Representation.Loci.Empty;
}
info.innerText = label;
});
/**
* Create a mesh of spheres at given centers
* - asynchronous (using async/await)
* - progress tracking (via `ctx.update`)
* - re-use storage from an existing mesh if given
*/
function getSphereMesh(ctx, centers, mesh) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var builderState, t, v, sphere, i, il;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
builderState = mesh_builder_1.MeshBuilder.createState(centers.length * 128, centers.length * 128 / 2, mesh);
t = linear_algebra_1.Mat4.identity();
v = linear_algebra_1.Vec3.zero();
sphere = (0, sphere_1.Sphere)(3);
builderState.currentGroup = 0;
i = 0, il = centers.length / 3;
_a.label = 1;
case 1:
if (!(i < il)) return [3 /*break*/, 4];
// for production, calls to update should be guarded by `if (ctx.shouldUpdate)`
return [4 /*yield*/, ctx.update({ current: i, max: il, message: "adding sphere " + i })];
case 2:
// for production, calls to update should be guarded by `if (ctx.shouldUpdate)`
_a.sent();
builderState.currentGroup = i;
linear_algebra_1.Mat4.setTranslation(t, linear_algebra_1.Vec3.fromArray(v, centers, i * 3));
mesh_builder_1.MeshBuilder.addPrimitive(builderState, t, sphere);
_a.label = 3;
case 3:
++i;
return [3 /*break*/, 1];
case 4: return [2 /*return*/, mesh_builder_1.MeshBuilder.getMesh(builderState)];
}
});
});
}
var myData = {
centers: [0, 0, 0, 0, 3, 0, 1, 0, 4],
colors: [names_1.ColorNames.tomato, names_1.ColorNames.springgreen, names_1.ColorNames.springgreen],
labels: ['Sphere 0, Instance A', 'Sphere 1, Instance A', 'Sphere 0, Instance B', 'Sphere 1, Instance B'],
transforms: [linear_algebra_1.Mat4.identity(), linear_algebra_1.Mat4.fromTranslation(linear_algebra_1.Mat4.zero(), linear_algebra_1.Vec3.create(3, 0, 0))]
};
/**
* Get shape from `MyData` object
*/
function getShape(ctx, data, props, shape) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var centers, colors, labels, transforms, mesh, groupCount;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, ctx.update('async creation of shape from myData')];
case 1:
_a.sent();
centers = data.centers, colors = data.colors, labels = data.labels, transforms = data.transforms;
return [4 /*yield*/, getSphereMesh(ctx, centers, shape && shape.geometry)];
case 2:
mesh = _a.sent();
groupCount = centers.length / 3;
return [2 /*return*/, shape_1.Shape.create('test', data, mesh, function (groupId) { return colors[groupId]; }, // color: per group, same for instances
function () { return 1; }, // size: constant
function (groupId, instanceId) { return labels[instanceId * groupCount + groupId]; }, // label: per group and instance
transforms)];
}
});
});
}
// Init ShapeRepresentation container
var repr = (0, representation_2.ShapeRepresentation)(getShape, mesh_1.Mesh.Utils);
function init() {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _this = this;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
// Create shape from myData and add to canvas3d
return [4 /*yield*/, repr.createOrUpdate({}, myData).run(function (p) { return console.log(mol_task_1.Progress.format(p)); })];
case 1:
// Create shape from myData and add to canvas3d
_a.sent();
console.log('shape', repr);
canvas3d.add(repr);
canvas3d.requestCameraReset();
// Change color after 1s
setTimeout(function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
myData.colors[0] = names_1.ColorNames.darkmagenta;
// Calling `createOrUpdate` with `data` will trigger color and transform update
return [4 /*yield*/, repr.createOrUpdate({}, myData).run()];
case 1:
// Calling `createOrUpdate` with `data` will trigger color and transform update
_a.sent();
return [2 /*return*/];
}
});
}); }, 1000);
return [2 /*return*/];
}
});
});
}
exports.init = init;
init();
//# sourceMappingURL=render-shape.js.map