├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── assets
    ├── Vue-path-recognizer.jpg
    ├── directions.png
    ├── other_moves.gif
    └── screencast.gif
├── example
    ├── .babelrc
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    └── src
    │   ├── App.vue
    │   ├── index.html
    │   └── index.js
├── package-lock.json
├── package.json
├── src
    ├── PathRecognizer.vue
    └── index.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"],
3 |   "plugins": [
4 |     "babel-plugin-transform-class-properties",
5 |     "transform-async-to-generator"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | tmp
3 | ppt
4 | app
5 | .vscode
6 | *.lnk
7 | /.sass-cache


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019 vue-path-recognizer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | ![ScreenShot](./assets/Vue-path-recognizer.jpg)
  4 | <p align=center>Path recognizing component for Vue</p>
  5 | <p align=center>
  6 |     <a target="_blank" href="https://vuejs.org/" title="vue">
  7 |         <img src="https://img.shields.io/badge/vue-%3E%202.6.1-brightgreen.svg">
  8 |     </a>
  9 |     <a target="_blank" href="http://nodejs.org/download/" title="Node version">
 10 |         <img src="https://img.shields.io/badge/node-%3E%3D%208.0.0-brightgreen.svg">
 11 |     </a>
 12 |     <a target="_blank" href="https://github.com/MikeCheng1208/Vue-path-recognizer/pulls" title="PRs Welcome">
 13 |         <img src="https://img.shields.io/badge/PRs-welcome-blue.svg">
 14 |     </a>
 15 | </p>
 16 | 
 17 | [![NPM](https://nodei.co/npm/vue-path-recognizer.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/vue-path-recognizer)
 18 | 
 19 | ## Demo
 20 | <img style="display:block; width: 100%;" src="https://mikecheng1208.github.io/Vue-path-recognizer/assets/screencast.gif">
 21 | 
 22 | ## Installation
 23 | ```bash
 24 | npm install vue-path-recognizer --save
 25 | ```
 26 | 
 27 | ## Basic usage
 28 | 
 29 | 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.
 30 | 
 31 | ```js
 32 | import PathRecognizer, { PathRecognizerModel } from 'vue-path-recognizer';
 33 | 
 34 | export default {
 35 |   components: {
 36 |     PathRecognizer,
 37 |   },
 38 |   data() {
 39 |     return {
 40 |       context: null,
 41 |       result: "",
 42 |       models: [
 43 |         new PathRecognizerModel([7, 1], "A"),
 44 |         new PathRecognizerModel([2, 6, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4], "B"),
 45 |         new PathRecognizerModel([4, 3, 2, 1, 0], "C"),
 46 |       ]
 47 |     }
 48 |   }
 49 | }
 50 | ```
 51 | Add some path model to the recognizer.
 52 | Each path is defined by a direction-sequence and an associated data object.
 53 | 
 54 | ```js
 55 | models: [
 56 |   new PathRecognizerModel([7, 1], "A"),
 57 |   new PathRecognizerModel([2,6,0,1,2,3,4,0,1,2,3,4], "B"),
 58 |   new PathRecognizerModel([4,3,2,1,0], "C"),
 59 |   new PathRecognizerModel([2,6,7,0,1,2,3,4], "D"),
 60 |   new PathRecognizerModel([4,3,2,1,0,4,3,2,1,0], "E")
 61 | }
 62 | ```
 63 | Wrap your sliding template range
 64 | ```html
 65 | 
 66 | <path-recognizer
 67 |   :models="models"
 68 |   :onGesture="handleGesture"
 69 |   :onStartDraw="handleStartDraw"
 70 |   :onMovePath="handleMovePath"
 71 | >
 72 |   <template v-slot:default="props">
 73 |     <div 
 74 |       @mousedown="props.onMouseDown"
 75 |       @mouseup="props.onMouseUp"
 76 |     >
 77 |     </div>
 78 |   </template>
 79 | </path-recognizer>
 80 | 
 81 | ```
 82 | 
 83 | For example, here the model for the letter E :
 84 | 
 85 | ![ScreenShot](https://mikecheng1208.github.io/Vue-path-recognizer/assets/directions.png)
 86 | 
 87 | Set the models and the onGesture prop on the PathRecognizer component :
 88 | 
 89 | ```html
 90 |   <path-recognizer
 91 |     :models="models"
 92 |     :onGesture="handleGesture"
 93 |     :onStartDraw="handleStartDraw"
 94 |     :onMovePath="handleMovePath"
 95 |   >
 96 |   </path-recognizer>
 97 | ```
 98 | 
 99 | Note that onGesture({datas}) is always invoked at the end of the drawing. If no gesture is recognized, this parametter is null.
100 | 
101 | ## Custom filter
102 | 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.
103 | 
104 | 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.
105 | 
106 | ```js
107 |  filter(infos, model){
108 |     let lastPoint
109 |     switch (model.datas){
110 |       case "P":
111 |         lastPoint = [...infos.deltaPoints].pop()
112 |         if (lastPoint.y > infos.boundingBox.top + infos.boundingBox.height * 0.6) return Number.POSITIVE_INFINITY
113 |         return infos.cost
114 |       case "D":
115 |         lastPoint = [...infos.deltaPoints].pop()
116 |         if (lastPoint.y < infos.boundingBox.top + infos.boundingBox.height * 0.6) return Number.POSITIVE_INFINITY
117 |         return infos.cost
118 |    }
119 | }
120 | ```
121 | 
122 | For a full example, please consult the example folder of this repo.
123 | 
124 | ## API
125 | 
126 | ### PathRecognizer props
127 | 
128 | <table class="table table-bordered table-striped">
129 |     <thead>
130 |     <tr>
131 |         <th style="width: 100px;">name</th>
132 |         <th style="width: 50px;">type</th>
133 |         <th style="width: 50px;">default</th>
134 |         <th>description</th>
135 |     </tr>
136 |     </thead>
137 |     <tbody>
138 |         <tr>
139 |           <td>sliceCount</td>
140 |           <td>Number</td>
141 |           <td>8</td>
142 |           <td>Resolution of the direction wheel</td>
143 |         </tr>
144 |         <tr>
145 |           <td>deltaMove</td>
146 |           <td>Number</td>
147 |           <td>8</td>
148 |           <td>Mouse move threshold (pixels)</td>
149 |         </tr>
150 |         <tr>
151 |           <td>costMax</td>
152 |           <td>Number</td>
153 |           <td>32</td>
154 |           <td>Max cost limit to detect a gesture</td>
155 |         </tr>
156 |         <tr>
157 |           <td>models</td>
158 |           <td>[PathRecognizerModel([Number], Any)]</td>
159 |           <td>[]</td>
160 |           <td>Models to recognize</td>
161 |         </tr>
162 |         <tr>
163 |           <td>onStartDraw</td>
164 |           <td>Function()</td>
165 |           <td>function</td>
166 |           <td>Invoked when the user mouse down the zone</td>
167 |         </tr>
168 |         <tr>
169 |           <td>onMovePath</td>
170 |           <td>Function([{x:Number, y:Number}])</td>
171 |           <td>function</td>
172 |           <td>Invoked when the user move his mouse during a record session</td>
173 |         </tr>
174 |        <tr>
175 |           <td>onStopDraw</td>
176 |           <td>Function()</td>
177 |           <td>function</td>
178 |           <td>Invoked when the user mouse up the zone</td>
179 |         </tr>
180 |         <tr>
181 |           <td>onGesture</td>
182 |           <td>Function(datas:Any)</td>
183 |           <td>function</td>
184 |           <td>Invoked with the datas of the model recognized or null if no gesture is recognized</td>
185 |         </tr>
186 |     </tbody>
187 |  </table>
188 | 
189 | ## Free path
190 | 
191 | 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 :
192 | 
193 | ![ScreenShot](https://mikecheng1208.github.io/Vue-path-recognizer/assets/other_moves.gif)
194 | 
195 | ## References & Original Authors
196 | [Didier Brun](https://github.com/didierbrun)
197 | <br/>
198 | <br/>
199 | ## License
200 | MIT © [MikeCheng1208](https://github.com/MikeCheng1208)
201 | 


--------------------------------------------------------------------------------
/assets/Vue-path-recognizer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MikeCheng1208/Vue-path-recognizer/cdb362d20a70567bac26a3e244bde2e5dc64a680/assets/Vue-path-recognizer.jpg


--------------------------------------------------------------------------------
/assets/directions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MikeCheng1208/Vue-path-recognizer/cdb362d20a70567bac26a3e244bde2e5dc64a680/assets/directions.png


--------------------------------------------------------------------------------
/assets/other_moves.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MikeCheng1208/Vue-path-recognizer/cdb362d20a70567bac26a3e244bde2e5dc64a680/assets/other_moves.gif


--------------------------------------------------------------------------------
/assets/screencast.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MikeCheng1208/Vue-path-recognizer/cdb362d20a70567bac26a3e244bde2e5dc64a680/assets/screencast.gif


--------------------------------------------------------------------------------
/example/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   presets: [
 3 |     [
 4 |       '@babel/preset-env',
 5 |       {
 6 |         modules: false
 7 |       }
 8 |     ]
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | .cache
2 | dist
3 | node_modules


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-path-recognizer Example
 2 | 
 3 | 
 4 | ## Building and running on localhost
 5 | 
 6 | First install dependencies:
 7 | 
 8 | ```sh
 9 | npm install
10 | ```
11 | 
12 | To run in hot module reloading mode:
13 | 
14 | ```sh
15 | npm start
16 | ```
17 | 
18 | To create a production build:
19 | 
20 | ```sh
21 | npm run build-prod
22 | ```
23 | 
24 | ## Running
25 | 
26 | ```sh
27 | node dist/bundle.js
28 | ```
29 | 


--------------------------------------------------------------------------------
/example/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-path-recognizer-example",
 3 |   "version": "1.0.0",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "vue-path-recognizer": {
 8 |       "version": "1.0.6",
 9 |       "resolved": "https://registry.npmjs.org/vue-path-recognizer/-/vue-path-recognizer-1.0.6.tgz",
10 |       "integrity": "sha512-i55Fo10W1tV/rdkML5ENrjZQrr4RuVqwfkyZBMRmigDyW0PZUgetzq4mStv2vZzmyrHVUMH2hFy0jQimnTXLiQ=="
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-path-recognizer-example",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "keywords": [],
 7 |   "author": "",
 8 |   "license": "ISC",
 9 |   "scripts": {
10 |     "clean": "rm dist/bundle.js",
11 |     "start": "parcel src/index.html",
12 |     "build-prod": "parcel build src/index.html"
13 |   },
14 |   "dependencies": {
15 |     "vue": "^2.6.10",
16 |     "vue-hot-reload-api": "^2.3.3",
17 |     "vue-path-recognizer": "^1.0.6"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/core": "^7.5.0",
21 |     "@babel/preset-env": "^7.5.2",
22 |     "@vue/component-compiler-utils": "^3.0.0",
23 |     "parcel-bundler": "^1.12.3",
24 |     "vue-template-compiler": "^2.6.10"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/example/src/App.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import PathRecognizer, { PathRecognizerModel } from 'vue-path-recognizer';
  3 | export default {
  4 |   components: {
  5 |     PathRecognizer
  6 |   },
  7 |   data() {
  8 |     return {
  9 |       context: null,
 10 |       result: "",
 11 |       models: [
 12 |         new PathRecognizerModel([0, 3, 7, 1, 5], "★"),
 13 |         new PathRecognizerModel([7, 1], "A"),
 14 |         new PathRecognizerModel([2, 6, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4], "B"),
 15 |         new PathRecognizerModel([4, 3, 2, 1, 0], "C"),
 16 |         new PathRecognizerModel([2, 6, 7, 0, 1, 2, 3, 4], "D", this.filter),
 17 |         new PathRecognizerModel([4, 3, 2, 1, 0, 4, 3, 2, 1, 0], "E"),
 18 |         new PathRecognizerModel([4, 2], "F"),
 19 |         new PathRecognizerModel([4, 3, 2, 1, 0, 7, 6, 5, 0], "G", this.filter),
 20 |         new PathRecognizerModel([2, 6, 7, 0, 1, 2], "H"),
 21 |         new PathRecognizerModel([2], "I"),
 22 |         new PathRecognizerModel([2, 3, 4], "J"),
 23 |         new PathRecognizerModel([3, 4, 5, 6, 7, 0, 1], "K"),
 24 |         new PathRecognizerModel([2, 0], "L"),
 25 |         new PathRecognizerModel([6, 1, 7, 2], "M"),
 26 |         new PathRecognizerModel([6, 1, 6], "N"),
 27 |         new PathRecognizerModel([4, 3, 2, 1, 0, 7, 6, 5, 4], "O"),
 28 |         new PathRecognizerModel([2, 6, 7, 0, 1, 2, 3, 4], "P", this.filter),
 29 |         new PathRecognizerModel(
 30 |           [4, 3, 2, 1, 0, 7, 6, 5, 4, 0],
 31 |           "Q",
 32 |           this.filter
 33 |         ),
 34 |         new PathRecognizerModel([2, 6, 7, 0, 1, 2, 3, 4, 1], "R"),
 35 |         new PathRecognizerModel([4, 3, 2, 1, 0, 1, 2, 3, 4], "S"),
 36 |         new PathRecognizerModel([0, 2], "T"),
 37 |         new PathRecognizerModel([2, 1, 0, 7, 6], "U"),
 38 |         new PathRecognizerModel([1, 7, 0], "V"),
 39 |         new PathRecognizerModel([2, 7, 1, 6], "W"),
 40 |         new PathRecognizerModel([1, 0, 7, 6, 5, 4, 3], "X"),
 41 |         new PathRecognizerModel([2, 1, 0, 7, 6, 2, 3, 4, 5, 6, 7], "Y"),
 42 |         new PathRecognizerModel([0, 3, 0], "Z")
 43 |       ]
 44 |     };
 45 |   },
 46 |   methods: {
 47 |     filter(infos, model) {
 48 |       let lastPoint;
 49 |       switch (model.datas) {
 50 |         case "P":
 51 |           lastPoint = [...infos.deltaPoints].pop();
 52 |           if (
 53 |             lastPoint.y >
 54 |             infos.boundingBox.top + infos.boundingBox.height * 0.6
 55 |           )
 56 |             return Number.POSITIVE_INFINITY;
 57 |           return infos.cost;
 58 |         case "D":
 59 |           lastPoint = [...infos.deltaPoints].pop();
 60 |           if (
 61 |             lastPoint.y <
 62 |             infos.boundingBox.top + infos.boundingBox.height * 0.6
 63 |           )
 64 |             return Number.POSITIVE_INFINITY;
 65 |           return infos.cost;
 66 |         case "Q":
 67 |           lastPoint = [...infos.deltaPoints].pop();
 68 |           if (
 69 |             lastPoint.y >
 70 |             infos.boundingBox.top + infos.boundingBox.height * 0.3
 71 |           )
 72 |             return Number.POSITIVE_INFINITY;
 73 |           return infos.cost;
 74 |         case "G":
 75 |           lastPoint = [...infos.deltaPoints].pop();
 76 |           if (
 77 |             lastPoint.y <
 78 |             infos.boundingBox.top + infos.boundingBox.height * 0.3
 79 |           )
 80 |             return Number.POSITIVE_INFINITY;
 81 |           return infos.cost;
 82 |         default:
 83 |           return infos.cost;
 84 |       }
 85 |     },
 86 |     handleGesture(datas) {
 87 |       if (datas) {
 88 |         this.result = datas;
 89 |       } else {
 90 |         this.result = null;
 91 |       }
 92 |     },
 93 |     handleStartDraw() {
 94 |       this.context.clearRect(0, 0, 400, 400);
 95 |     },
 96 |     handleMovePath(points) {
 97 |       this.context.clearRect(0, 0, 400, 400);
 98 |       this.context.moveTo(points[0].x, points[0].y);
 99 |       this.context.beginPath();
100 |       for (let i = 1; i < points.length; i++) {
101 |         this.context.lineTo(points[i].x, points[i].y);
102 |       }
103 |       this.context.stroke();
104 |     }
105 |   },
106 |   mounted() {
107 |     let canvas = document.getElementById("canvas");
108 |     let context = canvas.getContext("2d");
109 |     context.stokeStyle = "#444";
110 |     context.lineWidth = 6;
111 |     this.context = context;
112 |   }
113 | };
114 | </script>
115 | 
116 | <template>
117 |   <div>
118 |     <path-recognizer
119 |       :models="models"
120 |       :onGesture="handleGesture"
121 |       :onStartDraw="handleStartDraw"
122 |       :onMovePath="handleMovePath"
123 |     >
124 |       <template v-slot:default="props">
125 |         <canvas
126 |           id="canvas"
127 |           width="400"
128 |           height="400"
129 |           @mousedown="props.onMouseDown"
130 |           @mouseup="props.onMouseUp"
131 |         ></canvas>
132 |       </template>
133 |     </path-recognizer>
134 |     <div class="result">
135 |       <h1>{{this.result}}</h1>
136 |     </div>
137 |   </div>
138 | </template>
139 | 
140 | <style>
141 |   #canvas{
142 |       background-color: #ddd;
143 |   }
144 | </style>
145 | 


--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>vue-path-recognizer</title>
 5 |         <meta charset="utf-8">
 6 |     </head>
 7 |     <body>
 8 |         <div id="app"></div>
 9 |         <script src="index.js"></script>
10 |     </body>
11 | </html>


--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App),
7 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-path-recognizer",
 3 |   "version": "1.0.22",
 4 |   "description": "Path recognizing component for Vue",
 5 |   "main": "./src/index.js",
 6 |   "scripts": {
 7 |     "deploy": "webpack --mode production",
 8 |     "push": "git push && npm publish"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/MikeCheng1208/Vue-path-recognizer.git"
13 |   },
14 |   "keywords": [
15 |     "vue",
16 |     "javascript"
17 |   ],
18 |   "author": "mike cheng <https://github.com/MikeCheng1208/> (https://github.com/MikeCheng1208/)",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/MikeCheng1208/Vue-path-recognizer/issues"
22 |   },
23 |   "homepage": "https://github.com/MikeCheng1208/Vue-path-recognizer",
24 |   "devDependencies": {
25 |     "@babel/core": "^7.5.4",
26 |     "@babel/preset-env": "^7.5.4",
27 |     "babel-core": "^6.26.3",
28 |     "babel-loader": "^8.0.6",
29 |     "babel-plugin-transform-async-to-generator": "^6.24.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-plugin-transform-export-extensions": "^6.22.0",
32 |     "babel-plugin-transform-runtime": "^6.23.0",
33 |     "babel-polyfill": "^6.26.0",
34 |     "babel-preset-env": "^1.7.0",
35 |     "css-loader": "^3.0.0",
36 |     "loader-utils": "^1.2.3",
37 |     "npm": "^10.2.4",
38 |     "npm-run-all": "^4.1.5",
39 |     "style-loader": "^0.23.1",
40 |     "vue": "^2.6.10",
41 |     "vue-html-loader": "^1.2.4",
42 |     "vue-loader": "^15.7.0",
43 |     "vue-template-compiler": "^2.6.10",
44 |     "webpack": "^4.35.3",
45 |     "webpack-cli": "^3.3.5",
46 |     "webpack-manifest-plugin": "^2.0.4"
47 |   },
48 |   "directories": {
49 |     "example": "example"
50 |   },
51 |   "dependencies": {}
52 | }
53 | 


--------------------------------------------------------------------------------
/src/PathRecognizer.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export class PathRecognizerModels {
  3 |   constructor(directions, datas, filter = null) {
  4 |     this.directions = directions
  5 |     this.datas = datas
  6 |     this.filter = filter
  7 |   }
  8 | }
  9 | export default {
 10 |     props:{
 11 |         sliceCount: {
 12 |             type: Number, default: 8
 13 |         },
 14 |         deltaMove: {
 15 |             type: Number, default: 8
 16 |         },
 17 |         costMax: {
 18 |             type: Number, default: 32
 19 |         },
 20 |         models: {
 21 |             type: Array, default: []
 22 |         },
 23 |         onStartDraw: {
 24 |             type: Function, default: []
 25 |         },
 26 |         onMovePath: {
 27 |             type: Function, default: ()=> {}
 28 |         },
 29 |         onStopDraw: {
 30 |             type: Function, default: ()=> {}
 31 |         },
 32 |         onGesture: {
 33 |             type: Function, default: ()=> {}
 34 |         }
 35 |     },
 36 |     data(){
 37 |         return {
 38 |             moveTarget: null,
 39 |             points: []
 40 |         }
 41 |     },
 42 |     methods:{
 43 |         handleDown(e){
 44 |             this.moveTarget = e.currentTarget;
 45 |             this.points = [{x:e.clientX, y:e.clientY}]
 46 |             window.document.addEventListener("mouseup", this.handleUp);
 47 |             this.startRecording()
 48 |         },
 49 |         handleUp() {
 50 |             window.document.removeEventListener("mouseup", this.handleUp)
 51 |             this.stopRecording()
 52 |         },
 53 |         handleMove(e){
 54 |             let client = {x: e.clientX, y: e.clientY}
 55 |             this.points = [...this.points, client];
 56 |             if (this.onMovePath){
 57 |                 this.onMovePath(this.points)
 58 |             }
 59 |         },
 60 |         startRecording(){
 61 |             this.moveTarget.addEventListener("mousemove", this.handleMove)
 62 |             if (this.onStartDraw) this.onStartDraw()
 63 |         },
 64 |         stopRecording() {
 65 |           this.moveTarget.removeEventListener("mousemove", this.handleMove)
 66 |           if (this.onStopDraw) this.onStopDraw()
 67 |           if (this.points.length >= 2) {
 68 |               this.analyze()
 69 |           } else {
 70 |               if (this.onGesture){
 71 |                   this.onGesture(null);
 72 |               }
 73 |           }
 74 |         },
 75 |         analyze(){
 76 |           let path = new Path(this.points, this.deltaMove)
 77 |           let recognizer = new PathRecognizerCore(this.sliceCount, this.deltaMove, this.costMax, path);
 78 |           let model = recognizer.recognize(this.models)
 79 |           if (model) {
 80 |             if (this.onGesture){
 81 |                 this.onGesture(model.datas)
 82 |             } else {
 83 |                 this.onGesture(null)
 84 |             }
 85 |           }
 86 |         },
 87 |     }
 88 | }
 89 | 
 90 | 
 91 | class PathRecognizerCore {
 92 |   constructor(sliceCount, deltaMove, costMax, path) {
 93 |     this.sliceCount = sliceCount
 94 |     this.deltMove = deltaMove
 95 |     this.costMax = costMax
 96 |     this.path = path
 97 | 
 98 |     this.directions = this.computeDirections()
 99 |   }
100 | 
101 |   recognize(models) {
102 |     let bestCost = Number.POSITIVE_INFINITY
103 |     let bestModel = null
104 | 
105 |     for (let model of models) {
106 |       let cost = this.costLeven(model.directions, this.directions)
107 | 
108 |       if (model.filter !== null){
109 |         let pathInfos = new PathInfos(this.path.deltaPoints, this.path.boundingBox, this.directions, cost)
110 |         cost = model.filter(pathInfos, model)
111 |       }
112 | 
113 |       if (cost < this.costMax && cost < bestCost){
114 |         bestCost = cost
115 |         bestModel = model
116 |       }
117 |     }
118 |     return bestModel
119 |   }
120 | 
121 |   directionCost(a, b) {
122 |     let dif = Math.abs(a - b)
123 |     if (dif > this.sliceCount / 2) {
124 |       dif = this.sliceCount - dif
125 |     }
126 |     return dif
127 |   }
128 | 
129 |   create2dArray(w, h, value) {
130 |     let result = []
131 |     for (let x = 0; x < w; x++) {
132 |       result.push([])
133 |       for (let y = 0; y < h; y++) {
134 |         result[x].push(value)
135 |       }
136 |     }
137 |     return result
138 |   }
139 | 
140 |   costLeven(a, b) {
141 |     let td = this.create2dArray(a.length + 1, b.length + 1, 0)
142 |     let tw = this.create2dArray(a.length + 1, b.length + 1, 0)
143 | 
144 | 
145 |     let safe_max_value = Number.POSITIVE_INFINITY
146 | 
147 |     for (let x = 1; x <= a.length; x++) {
148 |       for (let y = 1; y < b.length; y++) {
149 |         td[x][y] = this.directionCost(a[x - 1], b[y - 1])
150 |       }
151 |     }
152 | 
153 |     for (let index = 1; index <= b.length; index++) {
154 |       tw[0][index] = safe_max_value
155 |     }
156 | 
157 |     for (let index = 1; index <= a.length; index++) {
158 |       tw[index][0] = safe_max_value
159 |     }
160 | 
161 |     tw[0][0] = 0
162 | 
163 |     let cost = 0
164 |     let pa, pb, pc
165 | 
166 | 
167 |     for (let x = 1; x <= a.length; x++) {
168 |       for (let y = 1; y < b.length; y++) {
169 |         cost = td[x][y]
170 |         pa = tw[x - 1][y] + cost
171 |         pb = tw[x][y - 1] + cost
172 |         pc = tw[x - 1][y - 1] + cost
173 |         tw[x][y] = Math.min(Math.min(pa, pb), pc)
174 | 
175 |       }
176 |     }
177 |     return tw[a.length][b.length - 1]
178 |   }
179 | 
180 |   computeDirections() {
181 |     
182 |     let dpoints = this.path.deltaPoints
183 | 
184 |     if (dpoints.count < 2) {
185 |       return []
186 |     }
187 | 
188 |     let result = []
189 |     let sliceAngle = Math.PI * 2.0 / this.sliceCount
190 | 
191 | 
192 |     for (let i = 0; i < dpoints.length - 1; i++) {
193 |       let angle = dpoints[i].angleWithPoint(dpoints[i + 1])
194 |       if (angle < 0) {
195 |         angle += Math.PI * 2
196 |       }
197 |       if (angle < sliceAngle / 2 || angle > Math.PI * 2 - sliceAngle) {
198 |         result.push(0)
199 |       } else {
200 |         let rounded = Math.round(angle / sliceAngle)
201 |         result.push(rounded)
202 |       }
203 |     }
204 |     return result
205 |   }
206 | }
207 | 
208 | class PathInfos {
209 |   constructor(deltaPoints, boundingBox, directions, cost){
210 |     this.deltaPoints = deltaPoints
211 |     this.boundingBox = boundingBox
212 |     this.directions = directions
213 |     this.cost = cost
214 |   }
215 | }
216 | 
217 | class Path {
218 |   constructor(rawPoints, deltaMove) {
219 |     this.points = []
220 | 
221 |     let pi = Number.POSITIVE_INFINITY
222 | 
223 |     this.boundingBox = new PathRect(pi, pi, -pi, -pi)
224 |     let lastPoint = new PathPoint(rawPoints[0].x, rawPoints[0].y)
225 |     let currentPoint = null
226 |     this.deltaPoints = [lastPoint]
227 |     for (let point of rawPoints) {
228 |       currentPoint = new PathPoint(point.x, point.y)
229 |       this.points.push(currentPoint)
230 | 
231 |       // Bounding
232 |       if (point.x < this.boundingBox.left) this.boundingBox.left = point.x
233 |       if (point.x > this.boundingBox.right) this.boundingBox.right = point.x
234 |       if (point.y < this.boundingBox.top) this.boundingBox.top = point.y
235 |       if (point.y > this.boundingBox.bottom) this.boundingBox.bottom = point.y
236 | 
237 |       // Delta
238 |       let distance = lastPoint.squareDistanceTo(currentPoint)
239 |       if (distance >= deltaMove * deltaMove) {
240 |         this.deltaPoints.push(currentPoint)
241 |         
242 |         lastPoint = currentPoint
243 |       }
244 |     }
245 | 
246 |     if (lastPoint !== currentPoint) {
247 |       this.deltaPoints.push(currentPoint)
248 |     }
249 |   }
250 | 
251 |   get count() {
252 |     return this.points.length
253 |   }
254 | }
255 | 
256 | class PathRect {
257 |   constructor(top = 0, left = 0, bottom = 0, right = 0) {
258 |     this.top = top
259 |     this.left = left
260 |     this.bottom = bottom
261 |     this.right = right
262 |   }
263 | 
264 |   get height(){
265 |     return this.bottom - this.top
266 |   }
267 | 
268 |   get width(){
269 |     return this.right - this.left
270 |   }
271 | }
272 | 
273 | class PathPoint {
274 |   constructor(x, y) {
275 |     this.x = x
276 |     this.y = y
277 |   }
278 | 
279 |   squareDistanceTo(point) {
280 |     let dfx = point.x - this.x
281 |     let dfy = point.y - this.y
282 |     let squareDistance = dfx * dfx + dfy * dfy
283 |     return squareDistance
284 |   }
285 | 
286 |   angleWithPoint(point) {
287 |     let dfx = point.x - this.x
288 |     let dfy = point.y - this.y
289 |     return Math.atan2(dfy, dfx)
290 |   }
291 | }
292 | </script>
293 | <template>
294 |     <div class="PathRecognizer">
295 |         <slot
296 |           :onMouseDown="handleDown"
297 |           :onMouseUp="handleUp"
298 |         ></slot>
299 |     </div>
300 | </template>
301 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import PathRecognizer, { PathRecognizerModels } from './PathRecognizer.vue';
2 | export const PathRecognizerModel = PathRecognizerModels;
3 | export default PathRecognizer;


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
 3 | const config = {
 4 |     context: path.resolve(__dirname, 'src'),
 5 |     entry: {
 6 |         index: 'index',
 7 |     },
 8 |     output: {
 9 |         path: path.resolve(__dirname, 'dist'),
10 |         filename: '[name].js',
11 |     },
12 |     resolve: {
13 |         alias: {
14 |             vue: 'vue/dist/vue.min.js',
15 |         },
16 |         modules: [
17 |             path.resolve('src'),
18 |             path.resolve('node_modules')
19 |         ],
20 |         extensions: ['.js', '.vue']
21 |     },
22 |     module:{
23 |         rules:[
24 |             {
25 |                 test: /\.(css)$/,
26 |                 use: [
27 |                     'vue-style-loader',
28 |                     'css-loader',
29 |                 ]
30 |             },
31 |             {
32 |                 test: /\.(vue)$/,
33 |                 use: 'vue-loader',
34 |             },
35 |             {
36 |                 test: /\.(js)$/,
37 |                 use: 'babel-loader',
38 |             },
39 |         ]
40 |     },
41 |     plugins: [
42 |         new VueLoaderPlugin()
43 |     ]
44 | };
45 | 
46 | module.exports = config;
47 | 


--------------------------------------------------------------------------------