Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { Component } from 'react'
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import AddIcon from 'material-ui-icons/Add';
import Dialog from 'material-ui/Dialog';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import IconButton from 'material-ui/IconButton';
import Typography from 'material-ui/Typography';
import CloseIcon from 'material-ui-icons/Close';
import classNames from 'classnames';
const styles = {
appBar: {
position: 'relative',
},
flex: {
flex: 1,
},
};
@withStyles(styles)
export default class Canvas extends Component {
state = {
content: ''
};
componentDidMount() {
setTimeout(() => {
this.myScript = MyScript.register(this.editor, {
recognitionParams: {
type: 'MATH',
server: {
applicationKey: '3759944e-1a5f-4d38-9663-ff471f292804',
hmacKey: 'a299da94-244a-4571-95b7-fea8174e1bce'
},
ondemand: true
}
});
this.editor.addEventListener('exported', (event) => {
this.setState({
content: event.detail.exports['application/x-latex']
});
});
this.resize = () => {
this.myScript.resize();
this.setState({
canvasHeight: document.body.clientHeight - 200
})
};
this.resize();
window.addEventListener('resize', this.resize);
});
};
componentDidUpdate(prevProps, prevState) {
this.props.mq.StaticMath(this.formula);
if (this.state.canvasWidth != prevState.canvasWidth) {
this.myScript.resize();
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
}
addSpace = () => {
this.setState({
canvasWidth: this.editor.clientWidth + 300
});
};
handleClose = () => {
this.props.onClose();
};
save = () => {
this.props.input.write(this.state.content);
this.props.onClose();
}
render() {
const { classes } = this.props;
return (
<Dialog
fullScreen
open={true}
onClose={this.handleClose}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
<CloseIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Canvas
</Typography>
<Button color="inherit" onClick={this.save}>
save
</Button>
</Toolbar>
</AppBar>
<div className='canvas'>
<Button
variant="fab"
color="primary"
className='save-btn'
aria-label="save"
onClick={this.addSpace}
>
<AddIcon />
</Button>
<div className='formula' ref={(e) => { this.formula = e }}>{this.state.content}</div>
<div className='canvas-content grey-scrollbar'>
<div style={{ height: '500px', width: this.state.canvasWidth, padding: 5 }}>
{/* draw-area has `touch-action: none` css property */}
<div className='draw-area' ref={(e) => { this.editor = e }}></div>
</div>
</div>
</div>
</Dialog>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.