/** * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info. * * @author Alexander Rose */ import './index.html' import Viewer from 'mol-view/viewer'; import CIF, { CifBlock } from 'mol-io/reader/cif' import { parse as parseObj } from 'mol-io/reader/obj/parser' import { readUrlAs } from 'mol-util/read' import { Model, Format, Structure, StructureSymmetry } from 'mol-model/structure'; import { CartoonRepresentation } from 'mol-geo/representation/structure/representation/cartoon'; import { BallAndStickRepresentation } from 'mol-geo/representation/structure/representation/ball-and-stick'; import { EveryLoci } from 'mol-model/loci'; import { MarkerAction } from 'mol-geo/util/marker-data'; import { labelFirst } from 'mol-view/label'; import { Queries as Q, StructureProperties as SP, StructureSelection, StructureQuery } from 'mol-model/structure'; import { MeshBuilder } from 'mol-geo/shape/mesh-builder'; import { CustomRepresentation } from 'mol-geo/representation/custom'; import { Vec3 } from 'mol-math/linear-algebra'; const container = document.getElementById('container') if (!container) throw new Error('Can not find element with id "container".') const canvas = document.getElementById('canvas') as HTMLCanvasElement if (!canvas) throw new Error('Can not find element with id "canvas".') const info = document.getElementById('info') as HTMLCanvasElement if (!info) throw new Error('Can not find element with id "info".') const viewer = Viewer.create(canvas, container) viewer.animate() viewer.input.resize.subscribe(() => { // do whatever appropriate }) viewer.input.move.subscribe(({x, y, inside, buttons}) => { if (!inside || buttons) return const p = viewer.identify(x, y) const loci = viewer.getLoci(p) viewer.mark(EveryLoci, MarkerAction.RemoveHighlight) viewer.mark(loci, MarkerAction.Highlight) const label = labelFirst(loci) info.innerText = `${label}` }) async function getObjFromUrl(url: string) { const data = await readUrlAs(url, false) as string const comp = parseObj(data) const parsed = await comp.run() if (parsed.isError) throw parsed return parsed.result } async function getCifFromUrl(url: string) { const data = await readUrlAs(url, false) const comp = CIF.parse(data) const parsed = await comp.run() if (parsed.isError) throw parsed return parsed.result.blocks[0] } async function getModelFromMmcif(cif: CifBlock) { const models = await Model.create(Format.mmCIF(cif)).run() return models[0] } async function getStructureFromModel(model: Model, assembly = '1') { const assemblies = model.symmetry.assemblies if (assemblies.length) { return await StructureSymmetry.buildAssembly(Structure.ofModel(model), assembly).run() } else { return Structure.ofModel(model) } } async function init() { const cif = await getCifFromUrl('https://files.rcsb.org/download/1crn.cif') const model = await getModelFromMmcif(cif) const structure = await getStructureFromModel(model) viewer.center(structure.boundary.sphere.center) // cartoon for whole structure const cartoonRepr = CartoonRepresentation() await cartoonRepr.create(structure, { colorTheme: { name: 'chain-id' }, sizeTheme: { name: 'uniform', value: 0.2 }, useFog: false // TODO fog not working properly }).run() viewer.add(cartoonRepr) // create new structure via query const q1 = Q.generators.atoms({ residueTest: qtx => SP.residue.label_seq_id(qtx.element) < 7 }); const newStructure = StructureSelection.unionStructure(await StructureQuery.run(q1, structure)); // ball+stick for new structure const ballStickRepr = BallAndStickRepresentation() await ballStickRepr.create(newStructure, { colorTheme: { name: 'element-symbol' }, sizeTheme: { name: 'uniform', value: 0.1 }, useFog: false // TODO fog not working properly }).run() viewer.add(ballStickRepr) // create a custom mesh const meshBuilder = MeshBuilder.create(256, 128) meshBuilder.setId(0) meshBuilder.addSphere(Vec3.create(0, 0, 0), 4, 2) const mesh = meshBuilder.getMesh() // Mesh.computeNormalsImmediate(mesh) // mesh = getObjFromUrl('mesh.obj') // add representation from custom mesh const customRepr = CustomRepresentation() await customRepr.create(mesh, { useFog: false // TODO fog not working properly }).run() viewer.add(customRepr) // ensure the added representations get rendered, i.e. without mouse input viewer.requestDraw() } init()