diff --git a/package.json b/package.json
index 49f5078..b8b2830 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"react-dom": "^16.13.0",
"react-mathjax": "^1.0.1",
"react-scripts": "3.4.0",
+ "react-sizeme": "^2.6.12",
"react-svg": "^11.0.18"
},
"scripts": {
diff --git a/src/App.js b/src/App.js
index 7ecf2d8..3cc54f2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,22 +12,22 @@ class App extends React.Component {
this.openCanvas = this.openCanvas.bind(this);
this.saveProof = this.saveProof.bind(this);
this.introWindow = React.createRef();
- this.state = {
- initialCSS: 'initial',
- canvasOpen: false,
- popupOpen: false,
- proof: {
- premises: [],
- conclusion: '',
- steps: []
- }
- };
// this.state = {
// initialCSS: 'initial',
- // canvasOpen: true,
+ // canvasOpen: false,
// popupOpen: false,
- // proof: {premises: ["(({Q}))(({P}){Q})"], conclusion: "{Q}", steps:[] }
+ // proof: {
+ // premises: [],
+ // conclusion: '',
+ // steps: []
+ // }
// };
+ this.state = {
+ initialCSS: 'initial',
+ canvasOpen: true,
+ popupOpen: false,
+ proof: {premises: ["(({Q}))(({P}){Q})"], conclusion: "{Q}", steps:[] }
+ };
}
saveProof(proof) {
diff --git a/src/canvas/EGCut.js b/src/canvas/EGCut.js
index 487fab5..6beeba5 100644
--- a/src/canvas/EGCut.js
+++ b/src/canvas/EGCut.js
@@ -23,10 +23,6 @@ class EGCut extends React.Component {
}
}
- componentWillUnmount() {
- window.removeEventListener('click', this.handleClick);
- }
-
getBBoxData() {
if (this.cut.current) {
let { x, y, width, height } = this.cut.current.getBBox();
@@ -40,33 +36,28 @@ class EGCut extends React.Component {
}
componentDidMount() {
- this.setState(this.getBBoxData());
+ this.interval = setInterval(() => this.setState(this.getBBoxData()), 1);
}
- componentDidUpdate() {
- let bb = this.BB.current;
- let b = this.getBBoxData();
- bb.setAttribute('x', b._x);
- bb.setAttribute('y', b._y);
- bb.setAttribute('width', b._w);
- bb.setAttribute('height', b._h);
+ componentWillUnmount() {
+ window.removeEventListener('click', this.handleClick);
+ clearInterval(this.interval);
}
render() {
- let b = this.getBBoxData();
let childEl = this.props.children;
if (childEl.length < 1) {
childEl = {" "}
}
let highlight = this.state.highlight && this.props.enableHighlight;
+ let { _x, _y, _w, _h } = this.state;
return (