title: Konva Text Bounding
body: <p>I have a simple Konva set up, with a Layer, Rect, and Text.</p>
  
  <p>The canvas scales with the resizing of the window. My goal is for the text to be contained within the canvas, when dragged. At present, it works on the left and top bounds, but not the bottom and right bounds. </p>
  
  <p>What am I doing wrong here? </p>
  
  <h2>illustrating gif</h2>
  
  <p><a href="https://media.giphy.com/media/fBG0OGhFPwiHUOeGSJ/giphy.gif" rel="nofollow noreferrer">https://media.giphy.com/media/fBG0OGhFPwiHUOeGSJ/giphy.gif</a></p>
  
  <h2>code</h2>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import styled from "styled-components";
  import Konva from "konva";
  import { Stage, Layer, Text, Rect } from "react-konva";
  
  const CANVAS_INNER_PADDING = 5;
  
  const Container = styled.div`
    width: 50vw;
    height: 50vw;
    background-color: lightgray;
  `;
  
  class Canvas extends React.Component {
    constructor(props) {
      super(props);
      this.container = React.createRef();
      this.rect = React.createRef();
      window.addEventListener("resize", this.updateCanvasDimensions);
  
      this.state = {
        text: {
          value: "hello",
          x: CANVAS_INNER_PADDING,
          y: CANVAS_INNER_PADDING
        },
        canvas: {
          width: 0,
          height: 0,
          color: "red"
        }
      };
    }
  
    componentDidMount() {
      this.updateCanvasDimensions();
    }
  
    updateCanvasDimensions = () =&gt; {
      const height = this.container.current.clientHeight;
      const width = this.container.current.clientWidth;
  
      this.setState({
        canvas: { ...this.state.canvas, height, width }
      });
    };
  
    handleDragMove = e =&gt; {
      const { canvas } = this.state;
      const newX = e.target.x();
      const newY = e.target.y();
      let newerX = newX;
      let newerY = newY;
  
      if (newX &lt; CANVAS_INNER_PADDING) {
        newerX = CANVAS_INNER_PADDING;
      }
  
      if (newX &gt; canvas.width - CANVAS_INNER_PADDING) {
        newerX = canvas.width - CANVAS_INNER_PADDING;
      }
  
      if (newY &lt; CANVAS_INNER_PADDING) {
        newerY = CANVAS_INNER_PADDING;
      }
  
      if (newY &gt; canvas.height - CANVAS_INNER_PADDING) {
        newerY = canvas.height - CANVAS_INNER_PADDING;
      }
  
      this.setState({
        text: { ...this.state.text, x: newerX, y: newerY }
      });
    };
  
    handleDragEnd = e =&gt; {
      const newX = e.target.x();
      const newY = e.target.y();
  
      this.setState({
        text: { ...this.state.text, x: newX, y: newY }
      });
    };
  
    render() {
      const { text, canvas } = this.state;
  
      return (
        // Have to use `innerRef` with Styled Components.
        &lt;Container innerRef={this.container}&gt;
          &lt;Stage height={canvas.height} width={canvas.width}&gt;
            &lt;Layer&gt;
              &lt;Rect
                ref={this.rect}
                x={0}
                y={0}
                height={canvas.height}
                width={canvas.width}
                fill={canvas.color}
              /&gt;
              &lt;Text
                ref={this.text}
                draggable
                onDragMove={this.handleDragMove}
                onDragEnd={this.handleDragEnd}
                text={`${canvas.height}, ${canvas.width}`}
                fill="black"
                x={text.x}
                y={text.y}
              /&gt;
            &lt;/Layer&gt;
          &lt;/Stage&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    text: state.printState.text,
    canvas: state.printState.canvas
  });
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;Canvas /&gt;, rootElement);
  </code></pre>
  
  <h2>sandbox</h2>
  
  <p><a href="https://codesandbox.io/s/6jnmvzyqmk" rel="nofollow noreferrer">https://codesandbox.io/s/6jnmvzyqmk</a></p>