Simplify drawing fixture

Author: philipp-spiess

fixtures/dom/src/components/fixtures/pointer-events/draw-box.js

@@ -4,51 +4,39 @@ class DrawBox extends React.Component {
   state = {
     isDrawing: false,
     isCapturing: false,
-    isOver: false,
-    x: 0,
-    y: 0,
   };
 
   el = React.createRef();
 
   onDown = event => {
-    this.setState({
-      isDrawing: true,
-      ...this.extractRelativeCoordinates(event),
-    });
+    this.setState({isDrawing: true});
 
     this.el.current.setPointerCapture(event.pointerId);
+
+    const {x, y} = this.extractRelativeCoordinates(event);
+
+    const ctx = this.el.current.getContext('2d');
+    ctx.beginPath();
+    ctx.moveTo(x, y);
   };
 
   onMove = event => {
     if (!this.state.isDrawing) {
       return;
     }
 
-    const nextState = this.extractRelativeCoordinates(event);
+    const {x, y} = this.extractRelativeCoordinates(event);
 
     const ctx = this.el.current.getContext('2d');
-    ctx.beginPath();
-    ctx.moveTo(this.state.x, this.state.y);
-    ctx.lineTo(nextState.x, nextState.y);
+    ctx.lineTo(x, y);
     ctx.stroke();
-    ctx.closePath();
-
-    this.setState(nextState);
   };
 
   onUp = event => {
-    this.setState({
-      isDrawing: false,
-    });
-  };
-
-  onOver = event => {
-    this.setState({isOver: true});
-  };
+    this.setState({isDrawing: false});
 
-  onOut = event => {
-    this.setState({isOver: false});
+    const ctx = this.el.current.getContext('2d');
+    ctx.closePath();
   };
 
   onGotCapture = event => {
@@ -69,10 +57,10 @@ class DrawBox extends React.Component {
   };
 
   render() {
-    const {isOver, isCapturing} = this.state;
+    const {isCapturing} = this.state;
 
     const boxStyle = {
-      border: `1px solid ${isCapturing ? 'blue' : isOver ? 'red' : '#d9d9d9'}`,
+      border: `1px solid ${isCapturing ? 'blue' : '#d9d9d9'}`,
       margin: '10px 0 20px',
       touchAction: 'none',
     };
@@ -87,8 +75,6 @@ class DrawBox extends React.Component {
         onPointerMove={this.onMove}
         onPointerUp={this.onUp}
         onPointerCancel={this.onUp}
-        onPointerOver={this.onOver}
-        onPointerOut={this.onOut}
         onGotPointerCapture={this.onGotCapture}
         onLostPointerCapture={this.onLostCapture}
       />

fixtures/dom/src/components/fixtures/pointer-events/drawing.js

@@ -12,10 +12,9 @@ class Drawing extends React.Component {
         </TestCase.Steps>
 
         <TestCase.ExpectedResult>
-          You should see strokes as you move the pointer tool. While your
-          pointer tool is over the canvas, it should also have a red border.
-          While drawing, the canvas must have a blue border to signalize that a
-          pointer capture was received.
+          You should see strokes as you move the pointer tool. While drawing,
+          the canvas must have a blue border to signalize that a pointer capture
+          was received.
         </TestCase.ExpectedResult>
 
         <DrawBox />