|
| 1 | +import * as React from 'react' |
| 2 | +import PropTypes from 'prop-types' |
| 3 | +import {getTooltipContent} from './Tooltip' |
| 4 | + |
| 5 | +export const domainSpec = PropTypes.shape({ |
| 6 | + startCodon: PropTypes.number, |
| 7 | + endCodon: PropTypes.number, |
| 8 | + color: PropTypes.string, |
| 9 | + label: PropTypes.string, |
| 10 | + labelColor: PropTypes.string |
| 11 | +}) |
| 12 | + |
| 13 | +class Domain extends React.Component { |
| 14 | + centerX = () => { |
| 15 | + return this.props.x + (this.props.width / 2) |
| 16 | + } |
| 17 | + |
| 18 | + centerY = () => { |
| 19 | + return this.props.y + (this.props.height / 2) |
| 20 | + } |
| 21 | + |
| 22 | + displayText = () => { |
| 23 | + const label = document.getElementById(this.props.id) |
| 24 | + let labelLength = label ? label.textLength.baseVal.value : 0 |
| 25 | + let displayText = this.props.label |
| 26 | + if (labelLength) { |
| 27 | + let substringLength = labelLength |
| 28 | + // Find the number of characters that will fit inside |
| 29 | + while ((substringLength > 0) && |
| 30 | + (label.getSubStringLength(0, substringLength) > this.props.width)) { |
| 31 | + substringLength -= 1 |
| 32 | + } |
| 33 | + if (substringLength < labelLength) { |
| 34 | + // If we have to do shortening |
| 35 | + substringLength -= 2 // make room for ellipsis .. |
| 36 | + if (substringLength <= 0) { |
| 37 | + // too short to show any string |
| 38 | + displayText = '' |
| 39 | + } else { |
| 40 | + // if it's long enough to show anything at all |
| 41 | + displayText = displayText.substr(0, substringLength) + '..' |
| 42 | + } |
| 43 | + } |
| 44 | + } |
| 45 | + return displayText |
| 46 | + } |
| 47 | + |
| 48 | + makeTextElement = (reference) => { |
| 49 | + let props = { |
| 50 | + x: this.centerX(), |
| 51 | + y: this.centerY(), |
| 52 | + textAnchor: 'middle', |
| 53 | + dy: '0.3em', |
| 54 | + fill: (this.props.labelColor || '#FFFFFF'), |
| 55 | + style: { |
| 56 | + fontSize: '12px', |
| 57 | + fontFamily: 'arial' |
| 58 | + } |
| 59 | + } |
| 60 | + const text = (reference ? (this.props.label || '') : this.displayText()) |
| 61 | + if (reference) { |
| 62 | + props.id = this.props.id |
| 63 | + props.visibility = 'hidden' |
| 64 | + props.style = {opacity: 0} |
| 65 | + } |
| 66 | + return (<text {...props}>{text}</text>) |
| 67 | + } |
| 68 | + |
| 69 | + render() { |
| 70 | + return ( |
| 71 | + <g> |
| 72 | + <rect |
| 73 | + x={this.props.x} |
| 74 | + y={this.props.y} |
| 75 | + width={this.props.width} |
| 76 | + height={this.props.height} |
| 77 | + fill={this.props.color} |
| 78 | + /> |
| 79 | + {this.makeTextElement(true)} |
| 80 | + {this.makeTextElement(false)} |
| 81 | + <rect |
| 82 | + x={this.props.x} |
| 83 | + y={this.props.y} |
| 84 | + width={this.props.width} |
| 85 | + height={this.props.height} |
| 86 | + style={{opacity: 0}} |
| 87 | + data-tip={getTooltipContent(this.props.tooltip)} |
| 88 | + data-for='svgTooltip' |
| 89 | + /> |
| 90 | + </g> |
| 91 | + ) |
| 92 | + } |
| 93 | +} |
| 94 | + |
| 95 | +Domain.propTypes = { |
| 96 | + x: PropTypes.number, |
| 97 | + y: PropTypes.number, |
| 98 | + width: PropTypes.number, |
| 99 | + height: PropTypes.number, |
| 100 | + color: PropTypes.string, |
| 101 | + label: PropTypes.string, |
| 102 | + labelColor: PropTypes.string, |
| 103 | + spec: domainSpec, |
| 104 | + tooltip: PropTypes.any |
| 105 | +} |
| 106 | + |
| 107 | +export default Domain |
0 commit comments