Skip to content
Snippets Groups Projects
Commit 03dbb067 authored by Alexander Rose's avatar Alexander Rose
Browse files

wip, canvas example

parent fd6b900a
No related branches found
No related tags found
No related merge requests found
......@@ -7,6 +7,7 @@
import * as React from 'react'
import { StructureRepresentation, StructureProps } from 'mol-geo/representation/structure';
import Viewer from 'mol-view/viewer';
import { VisualQuality } from 'mol-geo/representation/util';
export interface StructureRepresentationComponentProps {
viewer: Viewer
......@@ -16,12 +17,14 @@ export interface StructureRepresentationComponentProps {
export interface StructureRepresentationComponentState {
label: string
visible: boolean
quality: VisualQuality
}
export class StructureRepresentationComponent extends React.Component<StructureRepresentationComponentProps, StructureRepresentationComponentState> {
state = {
label: this.props.representation.label,
visible: this.props.representation.props.visible,
quality: this.props.representation.props.quality,
}
componentWillMount() {
......@@ -31,27 +34,31 @@ export class StructureRepresentationComponent extends React.Component<StructureR
...this.state,
label: repr.label,
visible: repr.props.visible,
quality: repr.props.quality,
})
}
async update(state: Partial<StructureRepresentationComponentState>) {
const repr = this.props.representation
const props: Partial<StructureProps> = {}
if (state.visible !== undefined) {
await repr.createOrUpdate({ visible: state.visible }).run()
// this.props.viewer.add(repr)
if (state.visible !== undefined) props.visible = state.visible
if (state.quality !== undefined) props.quality = state.quality
await repr.createOrUpdate(props).run()
this.props.viewer.add(repr)
this.props.viewer.requestDraw()
}
const newState = {
...this.state,
visible: repr.props.visible,
quality: repr.props.quality
}
this.setState(newState)
}
render() {
const { label, visible } = this.state
const { label, visible, quality } = this.state
return <div>
<div>
......@@ -64,6 +71,17 @@ export class StructureRepresentationComponent extends React.Component<StructureR
{visible ? 'Hide' : 'Show'}
</button>
</div>
<div>
<span>Quality</span>
<select value={quality} onChange={(e) => this.update({ quality: e.target.value as VisualQuality }) }>
<option value='auto'>auto</option>
<option value='lowest'>lowest</option>
<option value='low'>low</option>
<option value='medium'>medium</option>
<option value='high'>high</option>
<option value='highest'>highest</option>
</select>
</div>
</div>
</div>;
}
......
......@@ -33,7 +33,8 @@ export interface StructureViewComponentState {
symmetryFeatureId: number
symmetryFeatureIds: { id: number, label: string }[]
structureRepresentations: StructureRepresentation<any>[]
active: { [k: string]: boolean }
structureRepresentations: { [k: string]: StructureRepresentation<any> }
}
export class StructureViewComponent extends React.Component<StructureViewComponentProps, StructureViewComponentState> {
......@@ -46,6 +47,7 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
symmetryFeatureId: this.props.structureView.symmetryFeatureId,
symmetryFeatureIds: this.props.structureView.getSymmetryFeatureIds(),
active: this.props.structureView.active,
structureRepresentations: this.props.structureView.structureRepresentations
}
......@@ -62,19 +64,25 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
symmetryFeatureId: sv.symmetryFeatureId,
symmetryFeatureIds: sv.getSymmetryFeatureIds(),
active: sv.active,
structureRepresentations: sv.structureRepresentations
})
}
componentDidMount() {
this.props.structureView.structureRepresentationsUpdated.subscribe(() => this.setState({
structureRepresentations: this.props.structureView.structureRepresentations
const sv = this.props.structureView
this.props.structureView.updated.subscribe(() => this.setState({
symmetryFeatureIds: sv.getSymmetryFeatureIds(),
structureRepresentations: sv.structureRepresentations
}))
}
async update(state: Partial<StructureViewComponentState>) {
const sv = this.props.structureView
console.log(state)
if (state.modelId !== undefined) await sv.setModel(state.modelId)
if (state.assemblyId !== undefined) await sv.setAssembly(state.assemblyId)
if (state.symmetryFeatureId !== undefined) await sv.setSymmetryFeature(state.symmetryFeatureId)
......@@ -89,13 +97,14 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
symmetryFeatureId: sv.symmetryFeatureId,
symmetryFeatureIds: sv.getSymmetryFeatureIds(),
active: sv.active,
structureRepresentations: sv.structureRepresentations
}
this.setState(newState)
}
render() {
const { label, modelIds, assemblyIds, symmetryFeatureIds, structureRepresentations } = this.state
const { label, modelIds, assemblyIds, symmetryFeatureIds, active, structureRepresentations } = this.state
const modelIdOptions = modelIds.map(m => {
return <option key={m.id} value={m.id}>{m.label}</option>
......@@ -122,6 +131,16 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
>
{modelIdOptions}
</select>
<input type='range'
value={this.state.modelId}
min={Math.min(...modelIds.map(m => m.id))}
max={Math.max(...modelIds.map(m => m.id))}
step='1'
onInput={(e) => {
this.update({ modelId: parseInt(e.currentTarget.value) })
}}
>
</input>
</div>
<div>
<span>Assembly</span>
......@@ -145,15 +164,39 @@ export class StructureViewComponent extends React.Component<StructureViewCompone
{symmetryFeatureIdOptions}
</select>
</div>
<div>
<h4>Active</h4>
{ Object.keys(active).map((k, i) => {
return <div key={i}>
<input
type='checkbox'
checked={active[k]}
onChange={(e) => {
const sv = this.props.structureView
if (k === 'symmetryAxes') {
sv.setSymmetryAxes(e.target.checked)
} else if (Object.keys(sv.structureRepresentations).includes(k)) {
sv.setStructureRepresentation(k, e.target.checked)
}
}}
/> {k}
</div>
} ) }
</div>
<div>
<h3>Structure Representations</h3>
{ structureRepresentations ? structureRepresentations.map((r, i) =>
<div key={i}>
{ Object.keys(structureRepresentations).map((k, i) => {
if (active[k]) {
return <div key={i}>
<StructureRepresentationComponent
representation={r}
representation={structureRepresentations[k]}
viewer={this.props.structureView.viewer}
/>
</div>) : '' }
</div>
} else {
return ''
}
} ) }
</div>
</div>
</div>;
......
......@@ -31,10 +31,14 @@ export interface StructureView {
readonly structure: Structure | undefined
readonly assemblySymmetry: AssemblySymmetry | undefined
readonly structureRepresentations: StructureRepresentation<any>[]
readonly structureRepresentationsUpdated: BehaviorSubject<null>
readonly active: { [k: string]: boolean }
readonly structureRepresentations: { [k: string]: StructureRepresentation<any> }
readonly updated: BehaviorSubject<null>
readonly symmetryAxes: ShapeRepresentation<ShapeProps>
setSymmetryAxes(value: boolean): void
setStructureRepresentation(name: string, value: boolean): void
readonly modelId: number
readonly assemblyId: string
readonly symmetryFeatureId: number
......@@ -54,23 +58,29 @@ interface StructureViewProps {
symmetryFeatureId?: number
}
export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>, props: StructureViewProps = {}): Promise<StructureView> {
const cartoon = CartoonRepresentation()
const point = PointRepresentation()
const ballAndStick = BallAndStickRepresentation()
const carbohydrate = CarbohydrateRepresentation()
const structureRepresentations: StructureRepresentation<any>[] = [
// cartoon,
point,
// ballAndStick,
// carbohydrate
]
const active: { [k: string]: boolean } = {
cartoon: true,
point: false,
ballAndStick: false,
carbohydrate: false,
symmetryAxes: false,
polymerSphere: false,
}
const structureRepresentations: { [k: string]: StructureRepresentation<any> } = {
cartoon: CartoonRepresentation(),
point: PointRepresentation(),
ballAndStick: BallAndStickRepresentation(),
carbohydrate: CarbohydrateRepresentation(),
}
const symmetryAxes = ShapeRepresentation()
const polymerSphere = ShapeRepresentation()
const structureRepresentationsUpdated: BehaviorSubject<null> = new BehaviorSubject<null>(null)
const updated: BehaviorSubject<null> = new BehaviorSubject<null>(null)
let label: string
let model: Model | undefined
......@@ -81,12 +91,30 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
let assemblyId: string
let symmetryFeatureId: number
async function setSymmetryAxes(value: boolean) {
if (!value) {
assemblySymmetry = undefined
} else {
await AssemblySymmetry.attachFromCifOrAPI(models[modelId])
assemblySymmetry = AssemblySymmetry.get(models[modelId])
}
active.symmetryAxes = value
await setSymmetryFeature()
}
async function setStructureRepresentation(k: string, value: boolean) {
active[k] = value
await createStructureRepr()
}
async function setModel(newModelId: number, newAssemblyId?: string, newSymmetryFeatureId?: number) {
console.log('setModel', newModelId)
modelId = newModelId
model = models[modelId]
if (active.symmetryAxes) {
await AssemblySymmetry.attachFromCifOrAPI(model)
assemblySymmetry = AssemblySymmetry.get(model)
}
await setAssembly(newAssemblyId, newSymmetryFeatureId)
}
......@@ -169,8 +197,13 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
async function createStructureRepr() {
if (structure) {
console.log('createStructureRepr')
for (let i = 0, il = structureRepresentations.length; i < il; ++i) {
await structureRepresentations[i].createOrUpdate({}, structure).run()
for (const k in structureRepresentations) {
if (active[k]) {
await structureRepresentations[k].createOrUpdate({}, structure).run()
viewer.add(structureRepresentations[k])
} else {
viewer.remove(structureRepresentations[k])
}
}
viewer.center(structure.boundary.sphere.center)
......@@ -197,13 +230,14 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
// useFog: false // TODO fog not working properly
// }, shape).run()
} else {
structureRepresentations.forEach(repr => repr.destroy)
for (const k in structureRepresentations) structureRepresentations[k].destroy()
polymerSphere.destroy()
}
structureRepresentations.forEach(repr => viewer.add(repr))
viewer.add(polymerSphere)
structureRepresentationsUpdated.next(null)
updated.next(null)
viewer.requestDraw()
}
async function createSymmetryRepr() {
......@@ -224,16 +258,17 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
// useFog: false // TODO fog not working properly
// }).run()
await symmetryAxes.createOrUpdate({}, axesShape).run()
viewer.add(symmetryAxes)
} else {
symmetryAxes.destroy()
viewer.remove(symmetryAxes)
}
} else {
symmetryAxes.destroy()
viewer.remove(symmetryAxes)
}
} else {
symmetryAxes.destroy()
viewer.remove(symmetryAxes)
}
viewer.add(symmetryAxes)
updated.next(null)
viewer.requestDraw()
}
......@@ -247,10 +282,14 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
get structure() { return structure },
get assemblySymmetry() { return assemblySymmetry },
active,
structureRepresentations,
structureRepresentationsUpdated,
updated,
symmetryAxes,
setSymmetryAxes,
setStructureRepresentation,
get modelId() { return modelId },
get assemblyId() { return assemblyId },
get symmetryFeatureId() { return symmetryFeatureId },
......@@ -263,10 +302,10 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
getSymmetryFeatureIds,
destroy: () => {
structureRepresentations.forEach(repr => {
viewer.remove(repr)
repr.destroy()
})
for (const k in structureRepresentations) {
viewer.remove(structureRepresentations[k])
structureRepresentations[k].destroy()
}
viewer.remove(polymerSphere)
viewer.remove(symmetryAxes)
viewer.requestDraw()
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment