Adding promisified setState and simplfying reflow code for SVG stuff
This commit is contained in:
parent
e04e4edc1f
commit
f364673388
@ -6,7 +6,13 @@ class Base extends React.PureComponent {
|
||||
return this.tempBBox ? this.tempBBox : (this.state || {}).bbox;
|
||||
}
|
||||
|
||||
setBBox(box, recalculate = {}) {
|
||||
setStateAsync(state) {
|
||||
return new Promise(resolve => {
|
||||
this.setState(state, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
async setBBox(box, recalculate = {}) {
|
||||
let bbox = this._currentBBox() || Map({ width: 0, height: 0});
|
||||
|
||||
bbox = bbox.merge(box);
|
||||
@ -24,9 +30,8 @@ class Base extends React.PureComponent {
|
||||
}
|
||||
|
||||
this.tempBBox = bbox; // Want to get the updated bbox while setState is pending
|
||||
this.setState({ bbox }, () => {
|
||||
await this.setStateAsync({ bbox });
|
||||
this.tempBBox = null;
|
||||
});
|
||||
}
|
||||
|
||||
getBBox() {
|
||||
|
@ -16,7 +16,6 @@ class Box extends Base {
|
||||
}
|
||||
|
||||
reflow() {
|
||||
return new Promise(resolve => {
|
||||
const { padding, useAnchors } = this.props;
|
||||
const box = this.contained.getBBox();
|
||||
const labelBox = this.label ? this.label.getBBox() : { width: 0, height: 0};
|
||||
@ -29,13 +28,12 @@ class Box extends Base {
|
||||
axisX2: useAnchors ? box.axisX2 + padding : box.width + 2 * padding
|
||||
});
|
||||
|
||||
this.setState({
|
||||
return this.setStateAsync({
|
||||
width: this.getBBox().width,
|
||||
height: box.height + 2 * padding,
|
||||
contentTransform: `translate(${ padding } ${ padding + labelBox.height })`,
|
||||
rectTransform: `translate(0 ${ labelBox.height })`,
|
||||
labelTransform: `translate(0 ${ labelBox.height })`
|
||||
}, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -50,7 +50,6 @@ class HorizontalLayout extends Base {
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise(resolve => {
|
||||
const { spacing, withConnectors } = this.props;
|
||||
|
||||
const childBoxes = this.children.map(child => child.getBBox());
|
||||
@ -67,10 +66,9 @@ class HorizontalLayout extends Base {
|
||||
offset += box.width + spacing;
|
||||
});
|
||||
|
||||
this.setState({
|
||||
this.setStateAsync({
|
||||
childTransforms: this.updateChildTransforms(childBoxes),
|
||||
connectorPaths: withConnectors ? this.updateConnectorPaths(childBoxes) : ''
|
||||
}, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -37,14 +37,12 @@ class Image extends Base {
|
||||
}
|
||||
|
||||
reflow() {
|
||||
return new Promise(resolve => {
|
||||
const { padding } = this.props;
|
||||
const box = this.contained.getBBox();
|
||||
|
||||
this.setState({
|
||||
return this.setStateAsync({
|
||||
width: Math.round(box.width + 2 * padding),
|
||||
height: Math.round(box.height + 2 * padding)
|
||||
}, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -73,7 +73,6 @@ class Loop extends Base {
|
||||
}
|
||||
|
||||
reflow() {
|
||||
return new Promise(resolve => {
|
||||
const { skip, repeat, greedy } = this.props;
|
||||
const box = this.contained.getBBox();
|
||||
const labelBox = this.label ? this.label.getBBox() : { width: 0, height: 0 };
|
||||
@ -97,13 +96,12 @@ class Loop extends Base {
|
||||
box.offsetX = this.contentOffset.x;
|
||||
box.offsetY = this.contentOffset.y;
|
||||
|
||||
this.setState({
|
||||
return this.setStateAsync({
|
||||
labelTransform: `translate(${ this.getBBox().width - labelBox.width - 10 } ${ this.getBBox().height + 2 })`,
|
||||
loopPaths: [
|
||||
skip && skipPath(box, greedy),
|
||||
repeat && repeatPath(box, greedy)
|
||||
].filter(Boolean).join('')
|
||||
}, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -11,28 +11,21 @@ class Pin extends Base {
|
||||
}
|
||||
|
||||
reflow() {
|
||||
return new Promise(resolve => {
|
||||
const { radius } = this.props;
|
||||
|
||||
this.setBBox({
|
||||
return this.setBBox({
|
||||
width: radius * 2,
|
||||
height: radius * 2
|
||||
});
|
||||
|
||||
this.setState({
|
||||
transform: `translate(${ radius } ${ radius })`
|
||||
}, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { radius } = this.props;
|
||||
const { transform } = this.state || {};
|
||||
|
||||
const circleProps = {
|
||||
r: radius,
|
||||
style: style.pin,
|
||||
transform
|
||||
transform: `translate(${ radius } ${ radius })`
|
||||
};
|
||||
|
||||
return <circle { ...circleProps }></circle>;
|
||||
|
@ -7,7 +7,6 @@ import style from './style';
|
||||
/** @extends React.PureComponent */
|
||||
class Text extends Base {
|
||||
reflow() {
|
||||
return new Promise(resolve => {
|
||||
const box = this.text.getBBox();
|
||||
|
||||
this.setBBox({
|
||||
@ -15,9 +14,8 @@ class Text extends Base {
|
||||
height: box.height
|
||||
});
|
||||
|
||||
this.setState({
|
||||
return this.setStateAsync({
|
||||
transform: `translate(${-box.x} ${-box.y})`
|
||||
}, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -88,7 +88,6 @@ class VerticalLayout extends Base {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
return new Promise(resolve => {
|
||||
const { spacing, withConnectors } = this.props;
|
||||
|
||||
const childBoxes = this.children.map(child => child.getBBox());
|
||||
@ -105,14 +104,13 @@ class VerticalLayout extends Base {
|
||||
offset += spacing + box.height;
|
||||
});
|
||||
|
||||
this.setState({
|
||||
return this.setStateAsync({
|
||||
childTransforms: this.updateChildTransforms(childBoxes),
|
||||
connectorPaths: withConnectors ? [
|
||||
...childBoxes.map(box => this.makeCurve(box)),
|
||||
this.makeSide(childBoxes[0]),
|
||||
this.makeSide(childBoxes[childBoxes.length - 1])
|
||||
].join('') : ''
|
||||
}, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user