render()

in src/RCD.js [539:582]


  render() {
    return (
      <div
        className={this.props.className}
        style={{
          display: "block",
          background: "#fff",
          touchAction: "none",
          width: this.props.canvasWidth,
          height: this.props.canvasHeight,
          ...this.props.style
        }}
        ref={container => {
          if (container) {
            this.canvasContainer = container;
          }
        }}
      >
        {canvasTypes.map(({ name, zIndex }) => {
          const isInterface = name === "interface";
          return (
            <canvas
              key={name}
              ref={canvas => {
                if (canvas) {
                  this.canvas[name] = canvas;
                  this.ctx[name] = canvas.getContext("2d");
                }
              }}
              style={{ ...canvasStyle, zIndex }}
              onMouseDown={isInterface ? this.handleMouseDown : undefined}
              onMouseMove={isInterface ? this.handleMouseMove : undefined}
              onMouseUp={isInterface ? this.handleMouseUp : undefined}
              onMouseOut={isInterface ? this.handleMouseUp : undefined}
              onTouchStart={isInterface ? this.handleTouchStart : undefined}
              onTouchMove={isInterface ? this.handleTouchMove : undefined}
              onTouchEnd={isInterface ? this.handleTouchEnd : undefined}
              onTouchCancel={isInterface ? this.handleTouchEnd : undefined}
            />
          );
        })}
      </div>
    );
  }