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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 4x 4x 4x 4x | /** * 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 PropTypes from 'prop-types'; import { clamp, floor, } from 'lodash-es'; import CanvasComponent from './CanvasComponent'; import msaConnect from '../../store/connect' import withPositionStore from '../../store/withPositionStore'; class SequenceOverviewComponent extends CanvasComponent { draw = () => { // TODO: only update this if required this.drawScene(); } updateScrollPosition() { this._draw(); } drawScene() { this.scene = {}; ({xPos: this.scene.xViewPos, yPos: this.scene.yViewPos} = this.position); this.scene.xScalingFactor = 1 / this.props.globalTileWidth * this.props.tileWidth; this.scene.yScalingFactor = 1 / this.props.globalTileHeight * this.props.tileHeight; this.drawCurrentViewpoint(); this.drawSequences(); } drawSequences() { const { xViewPos, xScalingFactor, } = this.scene; const sequences = this.props.sequences.raw; const xInitPos = 0; //let yPos = -(yViewPos % tileHeight); // TODO: move into the reducer //let i = clamp(floor(yViewPos / tileHeight), 0, sequences.length - 1); let yPos = 0; let i = 0; // sequences themselves for (; i < sequences.length; i++) { const sequence = sequences[i].sequence; let xPos = xInitPos; let j = clamp(floor(xViewPos * xScalingFactor), 0, sequence.length - 1); j = 0; for (; j < sequence.length; j++) { const el = sequence[j]; this.ctx.fillStyle(this.props.colorScheme.getColor(el)); this.ctx.globalAlpha(0.5); this.ctx.fillRect(xPos, yPos, this.props.tileWidth, this.props.tileHeight); xPos += this.props.tileWidth; if (xPos > this.props.globalWidth) break; } yPos += this.props.tileHeight; if (yPos > this.props.height) break; } } drawCurrentViewpoint() { // currently selected area const { xViewPos, xScalingFactor, yViewPos, yScalingFactor, } = this.scene; this.ctx.globalAlpha(0.8); this.ctx.fillRect( xViewPos * xScalingFactor, yViewPos * yScalingFactor, this.props.globalWidth * xScalingFactor, this.props.globalHeight * yScalingFactor, ); } // to make react-docgen happy render() { return super.render(); } } SequenceOverviewComponent.defaultProps = { ...CanvasComponent.defaultProps, height: 50, tileWidth: 5, tileHeight: 5, }; SequenceOverviewComponent.propTypes = { ...CanvasComponent.propTypes, /** * Height of the SequenceOverview (in pixels), e.g. `50` */ height: PropTypes.number, /** * Width of a tile in the OverviewBar, e.g. `5` */ tileWidth: PropTypes.number, /** * Height of a tile in the OverviewBar, e.g. `5` */ tileHeight: PropTypes.number, }; const SOC = withPositionStore(SequenceOverviewComponent); const mapStateToProps = state => { return { sequences: state.sequences, width: state.props.width, globalWidth: state.props.width, globalHeight: state.props.height, globalTileWidth: state.props.tileWidth, globalTileHeight: state.props.tileHeight, colorScheme: state.props.colorScheme, } } export default msaConnect( mapStateToProps, )(SOC); |