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", "react-i18next": "^7.3.6",
"style-loader": "^0.20.1", "style-loader": "^0.20.1",
"svg-react-loader": "^0.4.5", "svg-react-loader": "^0.4.5",
"throttle-debounce": "^1.0.1",
"uglifyjs-webpack-plugin": "^1.1.8", "uglifyjs-webpack-plugin": "^1.1.8",
"webpack": "^3.10.0", "webpack": "^3.10.0",
"webpack-merge": "^4.1.1", "webpack-merge": "^4.1.1",

View File

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

View File

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

View File

@ -32,24 +32,6 @@ class Image extends Base {
height: 0 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() { preReflow() {
return this.contained; return this.contained;
} }
@ -96,7 +78,6 @@ class Image extends Base {
Image.propTypes = { Image.propTypes = {
children: PropTypes.node, children: PropTypes.node,
onRender: PropTypes.func,
padding: PropTypes.number padding: PropTypes.number
}; };

View File

@ -7785,10 +7785,6 @@ throat@^4.0.0:
version "4.1.0" version "4.1.0"
resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a" 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: throttleit@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c" resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"