Reorganizing the rendering flow
This commit is contained in:
parent
2a0e0149fd
commit
dea6d92272
@ -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",
|
||||
|
@ -29,10 +29,5 @@ exports[`App rendering 1`] = `
|
||||
Sample warning message
|
||||
</p>
|
||||
</Message>
|
||||
<div
|
||||
className="render"
|
||||
>
|
||||
Testing image
|
||||
</div>
|
||||
</React.Fragment>
|
||||
`;
|
||||
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user