<commit_before>import React from 'react';
import reactMixin from 'react-mixin';
import pureRender from 'react-addons-pure-render-mixin';
import HandsView from '../common/js/components/hands-view.jsx';
import leapStateHandlingV2 from '../common/js/mixins/leap-state-handling-v2';
import LeapStatus from '../common/js/components/leap-status.jsx';

export default class AlignmentRotation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      snapshots: [],
      leapState: 'initial',
      previousFrame: null
    };
    this.rmPhantomHand = this.rmPhantomHand.bind(this);
  }


  rmPhantomHand() {
    const { snapshots } = this.state;
    const newSnapshots = snapshots.slice(0, -1);
    this.setState({snapshots: newSnapshots});
  }

  getPhantomHands() {
    const { snapshots } = this.state;
    return {
      hands: snapshots.map(snapshot => {
        return {
          frames: [snapshot],
          follow: {xOffset: -100}
        };
      })
    };
  }

  handleLeapFrame(frame) {
    const {previousFrame} = this.state;
    let pointable, direction, translation = null;
    pointable = frame.pointables[0];
    if (pointable){
      direction = pointable.direction;
      //console.log(direction);
    }
    if (frame.hands.length > 0){
      //console.log(frame.hands[0].pointables);

      if (previousFrame){
        translation = frame.hands[0].translation(previousFrame);
        console.log(translation);
      }
      this.setState({previousFrame: frame});
    }
  }

  render() {
    const { snapshots } = this.state;
    const json = JSON.stringify(snapshots, null, 2);
    return (
      <div className='alignment-rotation'>
        <div className='view-container'>
          <HandsView ref='handsView' width='100%' height='100%' handsOpacity={1} phantomHands={this.getPhantomHands()}/>
        </div>
        <div className='controls'>
          <button onClick={this.snapshot}>Take snapshot</button>
          <button onClick={this.rmPhantomHand}>Remove last snapshot</button>
          <div>
            <textarea value={json} readOnly/>
            <LeapStatus ref='status'/>
          </div>
        </div>
      </div>
    );
  }
}

reactMixin.onClass(AlignmentRotation, pureRender);
reactMixin.onClass(AlignmentRotation, leapStateHandlingV2);<commit_msg>Filter paintable events and track only first finger direction, update screen display for testing<commit_after>import React from 'react';
import reactMixin from 'react-mixin';
import pureRender from 'react-addons-pure-render-mixin';
import HandsView from '../common/js/components/hands-view.jsx';
import leapStateHandlingV2 from '../common/js/mixins/leap-state-handling-v2';
import LeapStatus from '../common/js/components/leap-status.jsx';

export default class AlignmentRotation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      snapshots: [],
      leapState: 'initial',
      previousFrame: null,
      pointerDirection: [0,0,0],
      handTranslation: [0,0,0]
    };
    this.rmPhantomHand = this.rmPhantomHand.bind(this);
  }


  rmPhantomHand() {
    const { snapshots } = this.state;
    const newSnapshots = snapshots.slice(0, -1);
    this.setState({snapshots: newSnapshots});
  }

  getPhantomHands() {
    const { snapshots } = this.state;
    return {
      hands: snapshots.map(snapshot => {
        return {
          frames: [snapshot],
          follow: {xOffset: -100}
        };
      })
    };
  }

  handleLeapFrame(frame) {
    const {previousFrame, pointerDirection} = this.state;
    let pointable, direction, translation = null;
    let activePointers = frame.pointables.filter(function (pointer){
      // first finger, only if extended and valid
      return pointer.type==1 && pointer.extended && pointer.valid;
    });
    // in case user is using two hands
    pointable = activePointers[0];

    if (pointable){
      direction = pointable.direction;
      //console.log(direction);
      this.setState({pointerDirection: direction});
    }
    if (frame.hands.length > 0){

      if (previousFrame){
        translation = frame.hands[0].translation(previousFrame);
        this.setState({handTranslation: translation});
      }
      this.setState({previousFrame: frame});
    }
  }

  render() {
    const { snapshots, pointerDirection, handTranslation } = this.state;
    const json = JSON.stringify(snapshots, null, 2);
    return (
      <div className='alignment-rotation'>
        <div className='view-container'>
          <HandsView ref='handsView' width='100%' height='100%' handsOpacity={1} phantomHands={this.getPhantomHands()}/>
        </div>
        <div className='controls'>
          <button onClick={this.snapshot}>Take snapshot</button>
          <button onClick={this.rmPhantomHand}>Remove last snapshot</button>
          <div>
            <textarea value={json} readOnly/>
            <LeapStatus ref='status'>
              <div>Direction: {pointerDirection}</div>
              <div>Translation: {handTranslation}</div>
            </LeapStatus>
          </div>
        </div>
      </div>
    );
  }
}

reactMixin.onClass(AlignmentRotation, pureRender);
reactMixin.onClass(AlignmentRotation, leapStateHandlingV2);
{'fraction_non_alphanumeric': 0.1338432122370937, 'fraction_numerical': 0.008795411089866157, 'mean_word_length': 2.8892193308550187, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 42, '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': '2358892', 'n_tokens_mistral': 1595, 'n_tokens_neox': 1543, 'n_words': 314}