From 4c7e7818770ee6536e29e88b5fde4b787c93b5e5 Mon Sep 17 00:00:00 2001
From: Chris Vanderloo <chris.vanderloo@yahoo.com>
Date: Mon, 27 Apr 2020 19:36:47 -0400
Subject: [PATCH] update every second

---
 package.json        |  1 +
 src/App.js          | 24 ++++++++++++------------
 src/canvas/EGCut.js | 27 +++++++++------------------
 yarn.lock           | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+), 30 deletions(-)

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 = <EGCut>{" "}</EGCut>
     }
     let highlight = this.state.highlight && this.props.enableHighlight;
+    let { _x, _y, _w, _h } = this.state;
     return (
       <React.Fragment>
         <rect
-          x={b._x}
-          y={b._y}
-          width={b._w}
-          height={b._h}
-          ref={this.BB}
+          x={_x}
+          y={_y}
+          width={_w}
+          height={_h}
           fillOpacity="0.7" 
           strokeOpacity="1"
           stroke="black"
diff --git a/yarn.lock b/yarn.lock
index 44e03fc..5703cd4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2240,6 +2240,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -3764,6 +3769,13 @@ electron-to-chromium@^1.3.341, electron-to-chromium@^1.3.349:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.349.tgz#663f26a69d348a462df47b4d7ab162a2f29bbcb7"
   integrity sha512-uEb2zs6EJ6OZIqaMsCSliYVgzE/f7/s1fLWqtvRtHg/v5KBF2xds974fUnyatfxIDgkqzQVwFtam5KExqywx0Q==
 
+element-resize-detector@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.1.tgz#b0305194447a4863155e58f13323a0aef30851d1"
+  integrity sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw==
+  dependencies:
+    batch-processor "1.0.0"
+
 elliptic@^6.0.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
@@ -8801,6 +8813,16 @@ react-scripts@3.4.0:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-sizeme@^2.6.12:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e"
+  integrity sha512-tL4sCgfmvapYRZ1FO2VmBmjPVzzqgHA7kI8lSJ6JS6L78jXFNRdOZFpXyK6P1NBZvKPPCZxReNgzZNUajAerZw==
+  dependencies:
+    element-resize-detector "^1.2.1"
+    invariant "^2.2.4"
+    shallowequal "^1.1.0"
+    throttle-debounce "^2.1.0"
+
 react-svg@^11.0.18:
   version "11.0.18"
   resolved "https://registry.yarnpkg.com/react-svg/-/react-svg-11.0.18.tgz#d8f5cdc4644f02a6dfda864db6816559907c12e6"
@@ -9515,6 +9537,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -10173,6 +10200,11 @@ throat@^4.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
   integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
 
+throttle-debounce@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
+  integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-- 
2.51.2