<commit_before>/**
*
* PatternEditor
*
*/

import React from 'react';
import Header from './Header';
import Timeline from './Timeline';
import Rows from './Rows';

import { HotKeys } from 'react-hotkeys';

import '!style!css!./styles.css';

class PatternEditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);

    this.onScroll = this.onScroll.bind(this);
    this.onCursorMove = this.onCursorMove.bind(this);
    this.onNoteEnter = this.onNoteEnter.bind(this);

    this.yoff = 0;
  }

  componentDidUpdate(prevProps) {
    const vertTarget = document.getElementById('sideTable');
    const horizTarget = document.getElementsByClassName('xscroll')[0];
    const col1 = document.getElementById('col1');

    const windowScroll = this.props.cursor.row * 15.0;

    vertTarget.scrollTop = windowScroll;
    col1.scrollTop = windowScroll;

    // Only check the cursor is visible if it has moved on the row.
    if (prevProps.cursor.item !== this.props.cursor.item ||
        prevProps.cursor.track !== this.props.cursor.track) {
      const item = document.getElementsByClassName('event-cursor')[0];
      let offsetParent = item.offsetParent;
      let offset = item.offsetLeft;
      while (offsetParent.parentElement.id !== 'sideTable') {
        offset += offsetParent.offsetLeft;
        offsetParent = offsetParent.offsetParent;
      }

      if ((offset + item.clientWidth) > vertTarget.parentElement.clientWidth) {
        horizTarget.scrollLeft = ((offset + item.clientWidth) - vertTarget.parentElement.clientWidth) + 6;
      } else if (offset < horizTarget.scrollLeft) {
        horizTarget.scrollLeft = offset - 6;
      }
    }
  }

  onScroll(e) {
    const vertTarget = document.getElementById('sideTable');
    const horizTarget = document.getElementsByClassName('xscroll')[0];

    this.yoff += e.deltaY;
    if (this.yoff < 0) {
      this.yoff = vertTarget.scrollHeight - vertTarget.clientHeight;
    } else if (this.yoff >= vertTarget.scrollHeight - vertTarget.clientHeight) {
      this.yoff = 0;
    }

    const theCursor = Math.round((this.yoff) / 15.0);

    this.props.onCursorRowChange(theCursor);

    horizTarget.scrollLeft += e.deltaX;

    e.preventDefault();
  }

  onCursorMove(event, direction) {
    if (direction === 0) {
      this.props.onCursorLeft(this.props.song.tracks);
    } else if (direction === 1) {
      this.props.onCursorRight(this.props.song.tracks);
    } else if (direction === 2) {
      this.props.onCursorUp(1, this.props.song.patterns[0].rows);
    } else if (direction === 3) {
      this.props.onCursorDown(1, this.props.song.patterns[0].rows);
    } else if (direction === 4) {
      this.props.onCursorTrackLeft(this.props.song.tracks);
    } else if (direction === 5) {
      this.props.onCursorTrackRight(this.props.song.tracks);
    }

    event.preventDefault();
  }

  onNoteEnter(event) {
    this.props.onSetNoteAtCursor(this.props.cursor, event);
    this.props.onCursorDown(4, this.props.song.patterns[0].rows);
  }


  render() {
    const width = this.props.width;
    const height = this.props.height;

    /* 46 is the height of the header, need to calculate this somehow */
    const scrollHeight = (Math.floor((height - 46) / 15.0)) * 15.0;<commit_msg>Update horizontal scroll of pattern editor.<commit_after>/**
*
* PatternEditor
*
*/

import React from 'react';
import Header from './Header';
import Timeline from './Timeline';
import Rows from './Rows';

import { HotKeys } from 'react-hotkeys';

import '!style!css!./styles.css';

// t = current time
// b = start value
// c = change in value
// d = duration
function easeInOutQuad(tc, b, c, d) {
  let t = tc;
  t /= d / 2;
  if (t < 1) return (((c / 2) * t) * t) + b;
  t -= 1;
  return ((-c / 2) * ((t * (t - 2)) - 1)) + b;
}

class PatternEditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);

    this.onScroll = this.onScroll.bind(this);
    this.onCursorMove = this.onCursorMove.bind(this);
    this.onNoteEnter = this.onNoteEnter.bind(this);

    this.yoff = 0;
  }

  componentDidUpdate(prevProps) {
    const vertTarget = document.getElementById('sideTable');
    const horizTarget = document.getElementsByClassName('xscroll')[0];
    const col1 = document.getElementById('col1');

    const windowScroll = this.props.cursor.row * 15.0;

    vertTarget.scrollTop = windowScroll;
    col1.scrollTop = windowScroll;

    // Only check the cursor is visible if it has moved on the row.
    if (prevProps.cursor.item !== this.props.cursor.item ||
        prevProps.cursor.track !== this.props.cursor.track) {
      const item = document.getElementsByClassName('event-cursor')[0].parentElement;
      let offsetParent = item.offsetParent;
      let offset = item.offsetLeft;
      while (offsetParent.parentElement.id !== 'sideTable') {
        offset += offsetParent.offsetLeft;
        offsetParent = offsetParent.offsetParent;
      }

      if ((offset + item.clientWidth) > vertTarget.parentElement.clientWidth) {
        this.scrollHorizTo(horizTarget, ((offset + item.clientWidth) - vertTarget.parentElement.clientWidth) + 6, 100);
      } else if (offset < horizTarget.scrollLeft) {
        this.scrollHorizTo(horizTarget, offset - 6, 100);
      }
    }
  }

  onScroll(e) {
    const vertTarget = document.getElementById('sideTable');
    const horizTarget = document.getElementsByClassName('xscroll')[0];

    this.yoff += e.deltaY;
    if (this.yoff < 0) {
      this.yoff = vertTarget.scrollHeight - vertTarget.clientHeight;
    } else if (this.yoff >= vertTarget.scrollHeight - vertTarget.clientHeight) {
      this.yoff = 0;
    }

    const theCursor = Math.round((this.yoff) / 15.0);

    this.props.onCursorRowChange(theCursor);

    horizTarget.scrollLeft += e.deltaX;

    e.preventDefault();
  }

  onCursorMove(event, direction) {
    if (direction === 0) {
      this.props.onCursorLeft(this.props.song.tracks);
    } else if (direction === 1) {
      this.props.onCursorRight(this.props.song.tracks);
    } else if (direction === 2) {
      this.props.onCursorUp(1, this.props.song.patterns[0].rows);
    } else if (direction === 3) {
      this.props.onCursorDown(1, this.props.song.patterns[0].rows);
    } else if (direction === 4) {
      this.props.onCursorTrackLeft(this.props.song.tracks);
    } else if (direction === 5) {
      this.props.onCursorTrackRight(this.props.song.tracks);
    }

    event.preventDefault();
  }

  onNoteEnter(event) {
    this.props.onSetNoteAtCursor(this.props.cursor, event);
    this.props.onCursorDown(4, this.props.song.patterns[0].rows);
  }

  /* eslint no-param-reassign: ["error", { "props": false }]*/
  scrollHorizTo(element, to, duration) {
    const start = element.scrollLeft;
    const change = to - start;
    let currentTime = 0;
    const increment = 20;

    function animateScroll() {
      currentTime += increment;
      element.scrollLeft = easeInOutQuad(currentTime, start, change, duration);
      if (currentTime < duration) {
        setTimeout(animateScroll, increment);
      }
    }
    animateScroll();
  }

  render() {
    const width = this.props.width;
    const height = this.props.height;

    /* 46 is the height of the header, need to calculate this somehow */
    const scrollHeight = (Math.floor((height - 46) / 15.0)) * 15.0;
{'fraction_non_alphanumeric': 0.1392336751214247, 'fraction_numerical': 0.012682137075013492, 'mean_word_length': 3.1390284757118927, 'pattern_counts': {'":': 1, '<': 9, '<?xml version=': 0, '>': 7, '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': '3502690', 'n_tokens_mistral': 2434, 'n_tokens_neox': 2305, 'n_words': 488}