react-path-recognizer

Demo

Installation

yarn install react-path-recognizer --save

Basic usage

Import the PathRecongizer component. PathRecognizer is a container, it requires a child element to capture mouse moves. PathRecognizer does not draw the moves, for a full drawing example, check the example/ folder of this repo.

import PathRecognizer from 'react-path-recognizer'

export default class App extends Component {
  render(){
    return (
      <div>
        <PathRecognizer>
          <div style={{width:256, height:256, background:'lightgrey'}}/>
        </PathRecognizer>
      </div>
    )
  }
}

Add some path model to the recognizer. Each path is defined by a direction-sequence and an associated data object (AnyObject).

models(){
    return [
      new PathRecognizerModel([7, 1], "A"),
      new PathRecognizerModel([2,6,0,1,2,3,4,0,1,2,3,4], "B"),
      new PathRecognizerModel([4,3,2,1,0], "C"),
      new PathRecognizerModel([2,6,7,0,1,2,3,4], "D"),
      new PathRecognizerModel([4,3,2,1,0,4,3,2,1,0], "E")
    ]
}

For example, here the model for the letter E :

Set the models and the onGesture prop on the PathRecognizer component :

 <PathRecognizer models={this.models()} onGesture ={(datas)=>{console.log(datas)}}>
    <div style={{width:256, height:256, background:'lightgrey'}}/>
 </PathRecognizer>

Note that onGesture({datas}) is always invoked at the end of the drawing. If no gesture is recognized, this parametter is null.

Custom filter

While adding a model, you can specify a custom filter (third parametter of PathRecognizerModel). The filter callback method, if specified, will let you a last chance to modify / analyze the datas to determine a new score.

For example, the letter D & P have a similar draw-direction-path, however you can discriminate each one by detecting the position of the last point (up -> it's a P, down -> it's a D). The PathInfos struct transmited to the filter function will help you to determine the new score.

 filter(infos, model){
    let lastPoint
    switch (model.datas){
      case "P":
        lastPoint = [...infos.deltaPoints].pop()
        if (lastPoint.y > infos.boundingBox.top + infos.boundingBox.height * 0.6)return Number.POSITIVE_INFINITY
        return infos.cost
      case "D":
        lastPoint = [...infos.deltaPoints].pop()
        if (lastPoint.y < infos.boundingBox.top + infos.boundingBox.height * 0.6)return Number.POSITIVE_INFINITY
        return infos.cost
   }
}

For a full example, please consult the example folder of this repo.

API

PathRecognizer props

Free path

In this sample project I've used the Graffiti alphabet for the didactic aspect. However, react-path-recognizer is a generic algorithm, you can add any free path to control an interface / game :

License

MIT © Didier Brun