examples/miew_via_react/App.js
import React from 'react'
import ReactDOM from 'react-dom'
import ViewerContainer from './components/ViewerContainer'
import Checkbox from './controls/Checkbox'
import SpeedButton from './controls/SpeedButton'
import InfoPanel from './controls/InfoPanel'
import LoadButton from './controls/LoadButton'
import ChangeRepOptButton from './controls/ChangeRepOptButton'
class App extends React.Component {
constructor() {
super()
this._viewer = null
this._onViewerChange = this._onViewerChange.bind(this)
}
_onViewerChange = (changed) => {
if (changed.viewer !== undefined) {
this._viewer = changed.viewer
}
this.forceUpdate()
}
render() {
return (
<div>
<ViewerContainer onChange={this._onViewerChange} />
<div style={{ 'padding-top': '0.5em' }}>
<LoadButton viewer={this._viewer} file="1zlm" />
<ChangeRepOptButton viewer={this._viewer} rep="0" mode="BS" />
Axes ={' '}
<Checkbox viewer={this._viewer} prefName="axes" prefType={Boolean} />
Rotation =
<SpeedButton
viewer={this._viewer}
prefName="autoRotation"
delta={0.1}
prefType={Number}
/>
<SpeedButton
viewer={this._viewer}
prefName="autoRotation"
delta={-0.1}
prefType={Number}
/>
<InfoPanel viewer={this._viewer} />
</div>
</div>
)
}
}
const root = document.getElementsByClassName('main')[0]
ReactDOM.render(<App />, root)