<commit_before>React = require 'react'
LoadingIndicator = require '../components/loading-indicator'
getSubjectLocation = require '../lib/get-subject-location'
VideoPlayer = require './video-player'

SUBJECT_STYLE = display: 'block'
NOOP = Function.prototype

module.exports = React.createClass
  displayName: 'FrameViewer'

  getDefaultProps: ->
    subject: null
    frame: 0
    onLoad: NOOP
    classification: null
    workflow: null
    frameWrapper: null
    onChange: ->

  getInitialState: ->
    loading: true
    frameDimensions: {}
    viewBoxDimensions: {
      x: 0,
      y: 0,
      width: 0
      height: 0
    }
    panEnabled: false
    zooming: false
    zoomingTimeoutId: null

  componentDidMount: ->
    if @props.project? && 'pan and zoom' in @props.project?.experimental_tools
      # these events enable a user to navigate an image using arrows, +, and - keys,
      # while the user is in pan and zoom mode.
      addEventListener "keydown", @frameKeyPan
      addEventListener "wheel", @frameKeyPan

  componentWillUnmount: ->
    if @props.project? && 'pan and zoom' in @props.project?.experimental_tools
      removeEventListener "keydown", @frameKeyPan
      removeEventListener "wheel", @frameKeyPan

  render: () ->
    subject = @props.subject
    frame = @props.frame
    {type, format, src} = getSubjectLocation @props.subject, @props.frame
    FrameWrapper = @props.frameWrapper
    frameDisplay = switch type
      when 'image'
        <div className="subject-image-frame" >
          <img ref="subjectImage" className={"subject pan-active"} src={src} style={SUBJECT_STYLE} onLoad={@handleLoad} tabIndex={0} onFocus={@togglePanOn} onBlur={@togglePanOff}/>

          {if @state.loading
            <div className="loading-cover" style={@constructor.overlayStyle} >
              <LoadingIndicator />
            </div>}
        </div>
      when 'video'
        <VideoPlayer src={src} type={type} format={format} frame={@props.frame} onLoad={@handleLoad}>
        {if @state.loading
          <div className="loading-cover" style={@constructor.overlayStyle}>
            <LoadingIndicator />
          </div>}
        </VideoPlayer>

    if FrameWrapper
      <div>
        <FrameWrapper frame={frame} naturalWidth={@state.frameDimensions?.width or 0} naturalHeight={@state.frameDimensions?.height or 0} panByDrag={@panByDrag} viewBoxDimensions={@state.viewBoxDimensions or "0 0 0 0"} workflow={@props.workflow} subject={@props.subject} classification={@props.classification} annotation={@props.annotation} loading={@state.loading} onChange={@props.onChange} panEnabled={@state.panEnabled} >
          {frameDisplay}
        </FrameWrapper>
        {if ( @props.project? && 'pan and zoom' in @props.project?.experimental_tools)
          <div className="pan-zoom-controls" >
            <div className="draw-pan-toggle" >
              <div className={if @state.panEnabled then "" else "active"} >
                <button title={"draw"} title={"annotate"} className={"fa fa-mouse-pointer"} onClick={@togglePanOff}/>
              </div>
              <div className={if @state.panEnabled then "active" else ""}>
                <button title={"pan"} ref="pan" className={"fa fa-arrows"} onClick={@handleFocus.bind(this, "pan")} onFocus={@togglePanOn} onBlur={@togglePanOff}/>
              </div>
            </div>
            <div>
              <button
                title={ "zoom out" }
                ref="zoomOut"
                className={"zoom-out fa fa-minus" + if @cannotZoomOut() then " disabled" else "" }
                onMouseDown={ @continuousZoom.bind(this, 1.1 ) }
                onMouseUp={@stopZoom}
                onKeyDown={@keyDownZoomButton.bind(this,1.1)}
                onKeyUp={@stopZoom}
                onFocus={@togglePanOn}
                onBlur={@togglePanOff}
                onClick={@handleFocus.bind(this, "zoomOut")}
              />
            </div>
            <div>
              <button
                title={ "zoom in" }
                ref="zoomIn"
                className={ "zoom-in fa fa-plus" }
                onMouseDown={@continuousZoom.bind(this, .9)}
                onMouseUp={@stopZoom}
                onKeyDown={@keyDownZoomButton.bind(this,.9)}
                onKeyUp={@stopZoom}
                onFocus={@togglePanOn}
                onBlur={@togglePanOff}
                onClick={@handleFocus.bind(this, "zoomIn")}
              />
            </div>
            <div>
              <button title={"reset zoom levels"} className={"reset fa fa-refresh" + if @cannotZoomOut() then " disabled" else ""} onClick={ this.zoomReset } ></button>
            </div><commit_msg>clean-up attribute strings<commit_after>React = require 'react'
LoadingIndicator = require '../components/loading-indicator'
getSubjectLocation = require '../lib/get-subject-location'
VideoPlayer = require './video-player'

SUBJECT_STYLE = display: 'block'
NOOP = Function.prototype

module.exports = React.createClass
  displayName: 'FrameViewer'

  getDefaultProps: ->
    subject: null
    frame: 0
    onLoad: NOOP
    classification: null
    workflow: null
    frameWrapper: null
    onChange: ->

  getInitialState: ->
    loading: true
    frameDimensions: {}
    viewBoxDimensions: {
      x: 0,
      y: 0,
      width: 0
      height: 0
    }
    panEnabled: false
    zooming: false
    zoomingTimeoutId: null

  componentDidMount: ->
    if @props.project? && 'pan and zoom' in @props.project?.experimental_tools
      # these events enable a user to navigate an image using arrows, +, and - keys,
      # while the user is in pan and zoom mode.
      addEventListener "keydown", @frameKeyPan
      addEventListener "wheel", @frameKeyPan

  componentWillUnmount: ->
    if @props.project? && 'pan and zoom' in @props.project?.experimental_tools
      removeEventListener "keydown", @frameKeyPan
      removeEventListener "wheel", @frameKeyPan

  render: () ->
    subject = @props.subject
    frame = @props.frame
    {type, format, src} = getSubjectLocation @props.subject, @props.frame
    FrameWrapper = @props.frameWrapper
    frameDisplay = switch type
      when 'image'
        <div className="subject-image-frame" >
          <img ref="subjectImage" className="subject pan-active" src={src} style={SUBJECT_STYLE} onLoad={@handleLoad} tabIndex={0} onFocus={@togglePanOn} onBlur={@togglePanOff}/>

          {if @state.loading
            <div className="loading-cover" style={@constructor.overlayStyle} >
              <LoadingIndicator />
            </div>}
        </div>
      when 'video'
        <VideoPlayer src={src} type={type} format={format} frame={@props.frame} onLoad={@handleLoad}>
        {if @state.loading
          <div className="loading-cover" style={@constructor.overlayStyle}>
            <LoadingIndicator />
          </div>}
        </VideoPlayer>

    if FrameWrapper
      <div>
        <FrameWrapper frame={frame} naturalWidth={@state.frameDimensions?.width or 0} naturalHeight={@state.frameDimensions?.height or 0} panByDrag={@panByDrag} viewBoxDimensions={@state.viewBoxDimensions or "0 0 0 0"} workflow={@props.workflow} subject={@props.subject} classification={@props.classification} annotation={@props.annotation} loading={@state.loading} onChange={@props.onChange} panEnabled={@state.panEnabled} >
          {frameDisplay}
        </FrameWrapper>
        {if ( @props.project? && 'pan and zoom' in @props.project?.experimental_tools)
          <div className="pan-zoom-controls" >
            <div className="draw-pan-toggle" >
              <div className={if @state.panEnabled then "" else "active"} >
                <button title="annotate" className="fa fa-mouse-pointer" onClick={@togglePanOff}/>
              </div>
              <div className={if @state.panEnabled then "active" else ""}>
                <button title="pan" ref="pan" className="fa fa-arrows" onClick={@handleFocus.bind(this, "pan")} onFocus={@togglePanOn} onBlur={@togglePanOff}/>
              </div>
            </div>
            <div>
              <button
                title="zoom out"
                ref="zoomOut"
                className={"zoom-out fa fa-minus" + if @cannotZoomOut() then " disabled" else "" }
                onMouseDown={ @continuousZoom.bind(this, 1.1 ) }
                onMouseUp={@stopZoom}
                onKeyDown={@keyDownZoomButton.bind(this,1.1)}
                onKeyUp={@stopZoom}
                onFocus={@togglePanOn}
                onBlur={@togglePanOff}
                onClick={@handleFocus.bind(this, "zoomOut")}
              />
            </div>
            <div>
              <button
                title="zoom in"
                ref="zoomIn"
                className="zoom-in fa fa-plus"
                onMouseDown={@continuousZoom.bind(this, .9)}
                onMouseUp={@stopZoom}
                onKeyDown={@keyDownZoomButton.bind(this,.9)}
                onKeyUp={@stopZoom}
                onFocus={@togglePanOn}
                onBlur={@togglePanOff}
                onClick={@handleFocus.bind(this, "zoomIn")}
              />
            </div>
            <div>
              <button title="reset zoom levels" className={"reset fa fa-refresh" + if @cannotZoomOut() then " disabled" else ""} onClick={ this.zoomReset } ></button>
            </div>
{'fraction_non_alphanumeric': 0.13183279742765272, 'fraction_numerical': 0.0038585209003215433, 'mean_word_length': 2.3771263119797323, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 81, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7036155', 'n_tokens_mistral': 2693, 'n_tokens_neox': 2598, 'n_words': 573}