Break further into components
Luke Morris
parent
377e715744
commit
f89be6c653
|
|
@ -154,22 +154,10 @@ export const tooltipFormStyle = {
|
|||
export const tooltipInputButton = {marginLeft: '2px'}
|
||||
export const tooltipInput = {flex: '1 0 0'}
|
||||
|
||||
export const annotationStyle = (
|
||||
{startTime},
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging
|
||||
) => {
|
||||
export const annotationStyle = (time, dygraph, isMouseOver, isDragging) => {
|
||||
// TODO: export and test this function
|
||||
const [startX, endX] = dygraph.xAxisRange()
|
||||
let visibility = 'visible'
|
||||
|
||||
if (startTime < startX || startTime > endX) {
|
||||
visibility = 'hidden'
|
||||
}
|
||||
|
||||
const containerLeftPadding = 16
|
||||
const left = `${dygraph.toDomXCoord(startTime) + containerLeftPadding}px`
|
||||
const left = `${dygraph.toDomXCoord(time) + containerLeftPadding}px`
|
||||
const width = 2
|
||||
|
||||
return {
|
||||
|
|
@ -183,7 +171,7 @@ export const annotationStyle = (
|
|||
width: `${width}px`,
|
||||
transition: 'background-color 0.25s ease',
|
||||
transform: `translateX(-${width / 2}px)`, // translate should always be half with width to horizontally center the annotation pole
|
||||
visibility,
|
||||
visibility: 'visible',
|
||||
zIndex:
|
||||
isDragging || isMouseOver ? zIndexAnnotationActive : zIndexAnnotation,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,45 +85,180 @@ class Annotation extends Component {
|
|||
e.stopPropagation()
|
||||
}
|
||||
|
||||
renderPoint(
|
||||
annotation,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging,
|
||||
humanTime,
|
||||
isEditing
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className="dygraph-annotation"
|
||||
style={annotationStyle(annotation, dygraph, isMouseOver, isDragging)}
|
||||
data-time-ms={annotation.startTime}
|
||||
data-time-local={humanTime}
|
||||
>
|
||||
<div
|
||||
style={clickAreaStyle(isDragging, isEditing)}
|
||||
onMouseMove={this.handleDrag}
|
||||
onMouseDown={this.handleStartDrag}
|
||||
onMouseUp={this.handleStopDrag}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
/>
|
||||
<div style={flagStyle(isMouseOver, isDragging, false, false)} />
|
||||
<AnnotationTooltip
|
||||
isEditing={isEditing}
|
||||
annotation={annotation}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
annotationState={this.state}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderLeftMarker(
|
||||
annotation,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging,
|
||||
humanTime,
|
||||
isEditing
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className="dygraph-annotation"
|
||||
style={annotationStyle(
|
||||
annotation.startTime,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging
|
||||
)}
|
||||
data-time-ms={annotation.startTime}
|
||||
data-time-local={humanTime}
|
||||
>
|
||||
<div
|
||||
style={clickAreaStyle(isDragging, isEditing)}
|
||||
onMouseMove={this.handleDrag}
|
||||
onMouseDown={this.handleStartDrag}
|
||||
onMouseUp={this.handleStopDrag}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
/>
|
||||
<div style={flagStyle(isMouseOver, isDragging, true, false)} />
|
||||
<AnnotationTooltip
|
||||
isEditing={isEditing}
|
||||
annotation={annotation}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
annotationState={this.state}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderRightMarker(
|
||||
annotation,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging,
|
||||
humanTime,
|
||||
isEditing
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className="dygraph-annotation"
|
||||
style={annotationStyle(
|
||||
annotation.endTime,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging
|
||||
)}
|
||||
data-time-ms={annotation.endTime}
|
||||
data-time-local={humanTime}
|
||||
>
|
||||
<div
|
||||
style={clickAreaStyle(isDragging, isEditing)}
|
||||
onMouseMove={this.handleDrag}
|
||||
onMouseDown={this.handleStartDrag}
|
||||
onMouseUp={this.handleStopDrag}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
/>
|
||||
<div style={flagStyle(isMouseOver, isDragging, true, true)} />
|
||||
<AnnotationTooltip
|
||||
isEditing={isEditing}
|
||||
annotation={annotation}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
annotationState={this.state}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderSpan(
|
||||
annotation,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging,
|
||||
humanTime,
|
||||
isEditing
|
||||
) {
|
||||
return (
|
||||
<div>
|
||||
{this.renderLeftMarker(
|
||||
annotation,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging,
|
||||
humanTime,
|
||||
isEditing
|
||||
)}
|
||||
{this.renderRightMarker(
|
||||
annotation,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging,
|
||||
humanTime,
|
||||
isEditing
|
||||
)}
|
||||
<AnnotationWindow
|
||||
key={annotation.id}
|
||||
annotation={annotation}
|
||||
dygraph={dygraph}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {dygraph, annotation, mode} = this.props
|
||||
const {isDragging, isMouseOver} = this.state
|
||||
|
||||
const humanTime = `${new Date(+annotation.startTime)}`
|
||||
const hasDuration = annotation.starTime !== annotation.endTime
|
||||
|
||||
const isEditing = mode === EDITING
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className="dygraph-annotation"
|
||||
style={annotationStyle(annotation, dygraph, isMouseOver, isDragging)}
|
||||
data-time-ms={annotation.startTime}
|
||||
data-time-local={humanTime}
|
||||
>
|
||||
<div
|
||||
style={clickAreaStyle(isDragging, isEditing)}
|
||||
onMouseMove={this.handleDrag}
|
||||
onMouseDown={this.handleStartDrag}
|
||||
onMouseUp={this.handleStopDrag}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
/>
|
||||
<div style={flagStyle(isMouseOver, isDragging, hasDuration, false)} />
|
||||
<AnnotationTooltip
|
||||
isEditing={isEditing}
|
||||
annotation={annotation}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
annotationState={this.state}
|
||||
/>
|
||||
</div>
|
||||
{annotation.startTime !== annotation.endTime &&
|
||||
<AnnotationWindow
|
||||
key={annotation.id}
|
||||
annotation={annotation}
|
||||
dygraph={dygraph}
|
||||
/>}
|
||||
{annotation.startTime === annotation.endTime
|
||||
? this.renderPoint(
|
||||
annotation,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging,
|
||||
humanTime,
|
||||
isEditing
|
||||
)
|
||||
: this.renderSpan(
|
||||
annotation,
|
||||
dygraph,
|
||||
isMouseOver,
|
||||
isDragging,
|
||||
humanTime,
|
||||
isEditing
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue