Reorganizing the rendering flow

This commit is contained in:
Jeff Avallone 2018-02-17 10:45:03 -05:00
parent 2a0e0149fd
commit dea6d92272
5 changed files with 17 additions and 42 deletions

View File

@ -157,7 +157,6 @@
"react-i18next": "^7.3.6",
"style-loader": "^0.20.1",
"svg-react-loader": "^0.4.5",
"throttle-debounce": "^1.0.1",
"uglifyjs-webpack-plugin": "^1.1.8",
"webpack": "^3.10.0",
"webpack-merge": "^4.1.1",

View File

@ -29,10 +29,5 @@ exports[`App rendering 1`] = `
Sample warning message
</p>
</Message>
<div
className="render"
>
Testing image
</div>
</React.Fragment>
`;

View File

@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { translate } from 'react-i18next';
import { debounce } from 'throttle-debounce';
import style from './style.css';
@ -12,13 +11,13 @@ import { syntaxes, demoImage } from 'devel';
class App extends React.PureComponent {
state = {
syntaxes,
image: demoImage
syntaxes
}
setSvgUrl({ markup }) {
setSvgUrl(element) {
try {
const type = 'image/svg+xml';
const markup = element.outerHTML;
const blob = new Blob([markup], { type });
this.setState({
@ -35,9 +34,10 @@ class App extends React.PureComponent {
}
}
async setPngUrl({ element, markup }) {
async setPngUrl(element) {
try {
const type = 'image/png';
const markup = element.outerHTML;
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const loader = new Image();
@ -67,15 +67,19 @@ class App extends React.PureComponent {
}
}
handleRender = debounce(0, result => {
this.setSvgUrl(result);
this.setPngUrl(result);
})
handleSubmit = ({expr, syntax}) => {
console.log(syntax, expr); // eslint-disable-line no-console
this.setState({
image: demoImage
}, async () => {
await this.image.doReflow();
this.setSvgUrl(this.image.svg);
this.setPngUrl(this.image.svg);
});
}
imageRef = image => this.image = image
render() {
const { svgUrl, pngUrl, syntaxes, image } = this.state;
const downloadUrls = [
@ -95,9 +99,9 @@ class App extends React.PureComponent {
<Message type="warning" heading="Sample Warning">
<p>Sample warning message</p>
</Message>
<div className={ style.render }>
{ renderImage(image, { onRender: this.handleRender }) }
</div>
{ image && <div className={ style.render }>
{ renderImage(image, { ref: this.imageRef }) }
</div> }
</React.Fragment>;
}
}

View File

@ -32,24 +32,6 @@ class Image extends Base {
height: 0
}
componentDidMount() {
this.doReflow().then(() => this.publishMarkup());
}
componentDidUpdate() {
this.doReflow().then(() => this.publishMarkup());
}
publishMarkup() {
const { onRender } = this.props;
const markup = this.svg.outerHTML;
if (onRender && this.publishedMarkup !== markup) {
this.publishedMarkup = markup;
onRender({ element: this.svg, markup: this.svg.outerHTML });
}
}
preReflow() {
return this.contained;
}
@ -96,7 +78,6 @@ class Image extends Base {
Image.propTypes = {
children: PropTypes.node,
onRender: PropTypes.func,
padding: PropTypes.number
};

View File

@ -7785,10 +7785,6 @@ throat@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
throttle-debounce@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
throttleit@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"