# All files / components AnnotationLine.tsx

21.62% Statements 8/37
0% Branches 0/16
0% Functions 0/4
21.62% Lines 8/37

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    2191x

    1x

    1x
    1x
    1x
    1x

    1x

    1x
     import React, {FunctionComponent, createElement} from 'react'
    import {AnnotationDimension, AnnotationPinType} from '../types'

    import styles from './AnnotationLine.scss'

    interface AnnotationLineProps {
      dimension: AnnotationDimension
      color: string
      strokeWidth: number
      startValue: number
      stopValue: number
      length: number
      pin: AnnotationPinType
      id: string
    }

    // These could become configurable values
    const PIN_CIRCLE_RADIUS = 4
    const PIN_TRIANGLE_HEIGHT = 11
    const PIN_TRIANGLE_WIDTH = 9
    const RANGE_HEIGHT = 9

    /**
     *  This class draws the annotation itself.  Another handles the tooltip. (AnnotationTooltip)
     *
     *  If the annotation is a 'y' annotation, then this class *only* draws a point annotation
     *  (a single dotted line) (at the start value) with an optional pin on the right.
     *
     *  If it the annotation is an 'x' annotation, if the startTime === stopTime
     *  then this class draws a single dotted line, with an optional pin at the top
     *
     *  If startTime < stopTime
     *  then this draws a line at the start, another at the end, with a 'hat' over it that is
     *  entirely clickable; along with an overlay with 10% opacity that is NOT clickable.
     *
     *  The overlay is not clickable to allow overlapping point annotations.
     *  If there are two overlapping range annotations (or any type of annotation, range or point)
     *  then the annotation that was drawn last is clickable.  (they stack).  They are drawn in the order that
     *  the annotations are created; not in their time order.
     *
     *  To make any element of the annotation line clickable, then that element needs to have the 'props.id' assigned to its id,
     *  and (nice to have, but not required for clicking, but this shows the user that it
     *  is clickable (affordance)), the style should get changed;
     *
     *  add to the 'createElement' object:
     *
     *  style: {cursor: 'pointer'}
     *
     * */
    export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
      const {
        dimension,
        color,
        strokeWidth,
        startValue,
        stopValue,
        length,
        pin,
      } = props

      // This prevents blurry sub-pixel rendering as well as clipped lines
      // If the line is at the edge of the canvas the stroke will be half obscured
      // because the stroke is centered on the line. Giving a minimum value
      // prevents the line from being clipped
      const clampedStart = Math.max(1, Math.round(startValue))
      const clampedEnd = Math.max(1, Math.round(stopValue))

      if (dimension === 'y') {
        return (
          <>
            <line
              x1="0"
              x2={length}
              y1={clampedStart}
              y2={clampedStart}
              stroke={color}
              strokeWidth={strokeWidth}
              id={props.id}
              className={`${styles['giraffe-annotation-hover']} giraffe-annotation-line`}
            />
            {pin === 'circle' &&
              createElement('circle', {
                r: PIN_CIRCLE_RADIUS,
                fill: color,
                cx: length - PIN_CIRCLE_RADIUS,
                cy: clampedStart,
              })}
            {pin === 'start' &&
              createElement('polygon', {
                points: `${length - PIN_TRIANGLE_HEIGHT}, ${clampedStart} ${length -
                  PIN_TRIANGLE_HEIGHT / 2}, ${clampedStart +
                  PIN_TRIANGLE_WIDTH} ${length}, ${clampedStart}`,
                fill: color,
                style: {cursor: 'pointer'},
                id: props.id,
                className: 'giraffe-annotation-click-target',
              })}
            {pin === 'stop' &&
              createElement('polygon', {
                points: `${length - PIN_TRIANGLE_HEIGHT}, ${clampedStart} ${length -
                  PIN_TRIANGLE_HEIGHT / 2}, ${clampedStart -
                  PIN_TRIANGLE_WIDTH} ${length}, ${clampedStart}`,
                fill: color,
              })}
          </>
        )
      }

      // dimension is x:

      // this is the rectangle that goes on top of a range annotation
      // make it *all* click to edit
      const makeRangeRectangle = () => {
        const pixelMargin = 1

        return createElement('polygon', {
          points: `${clampedStart - pixelMargin}, 0
              ${clampedEnd + pixelMargin}, 0
              ${clampedEnd + pixelMargin}, ${RANGE_HEIGHT}
              ${clampedStart - pixelMargin}, ${RANGE_HEIGHT}`,
          fill: color,
          id: props.id,
          style: {cursor: 'pointer'},
        })
      }

      // this is the overlay that goes over the whole range; with 10% opacity
      // making this click to edit will make overlapping point annotations impossible
      const makeRangeOverlay = () => {
        return createElement('polygon', {
          points: `${clampedStart}, ${length}
              ${clampedEnd}, ${length}
              ${clampedEnd}, ${RANGE_HEIGHT}
              ${clampedStart}, ${RANGE_HEIGHT}`,
          fill: color,
          opacity: 0.1,
        })
      }

      const makePin = (pinType?: string) => {
        if (!pinType) {
          pinType = pin
        }

        switch (pinType) {
          case 'circle':
            return createElement('circle', {
              r: PIN_CIRCLE_RADIUS,
              fill: color,
              cx: clampedStart,
              cy: PIN_CIRCLE_RADIUS,
            })
          case 'start':
            return createElement('polygon', {
              points: `${clampedStart - PIN_TRIANGLE_WIDTH}, 0
              ${clampedStart + PIN_TRIANGLE_WIDTH}, 0
              ${clampedStart}, ${PIN_TRIANGLE_HEIGHT}`,
              fill: color,
              style: {cursor: 'pointer'},
              id: props.id,
              className: 'giraffe-annotation-click-target',
            })
          case 'stop':
            return createElement('polygon', {
              points: `${clampedStart}, 0 ${clampedStart -
                PIN_TRIANGLE_WIDTH}, ${PIN_TRIANGLE_HEIGHT /
                2} ${clampedStart}, ${PIN_TRIANGLE_HEIGHT}`,
              fill: color,
            })
          default:
            return null
        }
      }

      const xProps = {
        x1: clampedStart,
        x2: clampedStart,
        y1: '0',
        y2: length,
        stroke: color,
        strokeWidth,
        id: props.id,
        className: `${styles['giraffe-annotation-hover']} giraffe-annotation-line`,
      }

      if (clampedStart === clampedEnd) {
        // point annotation:
        return (
          // a separate line layer on the annotation line is required on top,
          // because the dashed line doesnt allow for a continuous click-able target
          // this top layer has an opacity of 0 so is not visible.
          <>
            <line {...xProps} strokeOpacity={0} />
            <line {...xProps} strokeDasharray={'4'} />
            {makePin()}
          </>
        )
      }

      // they are different (range annotation) , need two lines here
      const x2Props = {
        ...xProps,
        x1: clampedEnd,
        x2: clampedEnd,
      }
      return (
        <>
          <line {...xProps} strokeOpacity={0} />
          <line {...xProps} strokeDasharray={'4'} />
          <line {...x2Props} strokeOpacity={0} />
          <line {...x2Props} strokeDasharray={'4'} />
          {makeRangeOverlay()}
          {makeRangeRectangle()}
        </>
      )
    }

    export default AnnotationLine