All files / src/components/Canvas CanvasTilingGrid.js

88.24% Statements 30/34
75% Branches 6/8
100% Functions 4/4
87.5% Lines 28/32
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88                                                          14100x 14100x 14100x 14100x 14100x 12300x 12300x 12090x 12090x 12090x 12090x 12090x     187x     12090x               187x 187x 187x   187x             187x 187x 187x 187x 187x 187x             141x 141x 1410x 14100x              
/**
* Copyright 2018, Plotly, Inc.
* All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
 
import CanvasComponent from '../Canvas/CanvasComponent';
 
/**
 * Allows rendering in tiles of grids.
 *
 * |---|---|---|
 * |-1-|-2-|-3-|
 * |---|---|---|
 * ―――――――――――――
 * |---|---|---|
 * |-4-|-5-|-6-|
 * |---|---|---|
 *
 * where 1..6 are TilingGrid component of xGridSize and yGridSize of 3.
 *
 * This split-up is required to avoid frequent repaints and keeps the React
 * Tree calculations slim.
 */
class CanvasTilingGridComponent extends CanvasComponent {
 
  drawTile({row, column}) {
    const tileWidth = this.props.tileWidth;
    const tileHeight = this.props.tileHeight;
    const yPos = tileHeight * (row - this.props.startYTile);
    const xPos = tileWidth * (column - this.props.startXTile);
    if (row >= this.props.sequences.raw.length) return undefined;
    const sequence = this.props.sequences.raw[row].sequence;
    if (column >= sequence.length) return undefined;
    const text = sequence[column];
    Eif (text !== undefined) {
      const colorScheme = this.props.colorScheme.getColor(text);
      const key = `${text}-${colorScheme}`;
      const canvasTile = this.props.residueTileCache.createTile({
        key, tileWidth, tileHeight,
        create: ({canvas}) => {
          return this.drawResidue({text, canvas, row, column, colorScheme});
        }
      });
      this.props.ctx.drawImage(
        canvasTile, 0, 0, tileWidth, tileHeight,
        xPos, yPos, tileWidth, tileHeight,
      );
    }
  }
 
  drawResidue({row, column, canvas, colorScheme, text}) {
    canvas.globalAlpha = 0.7;
    canvas.fillStyle = colorScheme;
    canvas.fillRect(0, 0, this.props.tileWidth, this.props.tileHeight);
 
    Iif (this.props.border) {
      canvas.globalAlpha = 1;
      canvas.lineWidth = this.props.borderWidth;
      canvas.strokeStyle = this.props.borderStyle;
      canvas.strokeRect(0, 0, this.props.tileWidth, this.props.tileHeight);
    }
 
    canvas.globalAlpha = 1.0;
    canvas.fillStyle = this.props.textColor;
    canvas.font = this.props.textFont + "px mono";
    canvas.textBaseline = 'middle';
    canvas.textAlign = 'center';
    canvas.fillText(text,
      this.props.tileWidth / 2,
      (this.props.tileHeight / 2) + 1,
      this.props.tileWidth);
  }
 
  draw(props) {
    this.props = props;
    for (let i = this.props.startYTile; i < this.props.endYTile; i++) {
      for (let j = this.props.startXTile; j < this.props.endXTile; j++) {
        this.drawTile({row:i, column:j});
      }
    }
  }
}
 
export default CanvasTilingGridComponent;