{"id":26474059,"url":"https://github.com/mikecheng1208/vue-path-recognizer","last_synced_at":"2025-07-05T20:07:41.085Z","repository":{"id":47994468,"uuid":"196183251","full_name":"MikeCheng1208/Vue-path-recognizer","owner":"MikeCheng1208","description":"Path recognizing component for Vue","archived":false,"fork":false,"pushed_at":"2025-02-11T01:46:48.000Z","size":1532,"stargazers_count":21,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T05:48:13.886Z","etag":null,"topics":["javascript","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikeCheng1208.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-07-10T10:17:21.000Z","updated_at":"2025-02-04T02:17:03.000Z","dependencies_parsed_at":"2025-07-05T20:07:40.633Z","dependency_job_id":null,"html_url":"https://github.com/MikeCheng1208/Vue-path-recognizer","commit_stats":{"total_commits":46,"total_committers":3,"mean_commits":"15.333333333333334","dds":0.3913043478260869,"last_synced_commit":"5ba5d42759c71f417938e401eac5314182c91258"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MikeCheng1208/Vue-path-recognizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeCheng1208%2FVue-path-recognizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeCheng1208%2FVue-path-recognizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeCheng1208%2FVue-path-recognizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeCheng1208%2FVue-path-recognizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeCheng1208","download_url":"https://codeload.github.com/MikeCheng1208/Vue-path-recognizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeCheng1208%2FVue-path-recognizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263799994,"owners_count":23513430,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","vue"],"created_at":"2025-03-19T22:39:59.045Z","updated_at":"2025-07-05T20:07:41.070Z","avatar_url":"https://github.com/MikeCheng1208.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n![ScreenShot](./assets/Vue-path-recognizer.jpg)\n\u003cp align=center\u003ePath recognizing component for Vue\u003c/p\u003e\n\u003cp align=center\u003e\n    \u003ca target=\"_blank\" href=\"https://vuejs.org/\" title=\"vue\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/vue-%3E%202.6.1-brightgreen.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"http://nodejs.org/download/\" title=\"Node version\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/node-%3E%3D%208.0.0-brightgreen.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"https://github.com/MikeCheng1208/Vue-path-recognizer/pulls\" title=\"PRs Welcome\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-blue.svg\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n[![NPM](https://nodei.co/npm/vue-path-recognizer.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/vue-path-recognizer)\n\n## Demo\n\u003cimg style=\"display:block; width: 100%;\" src=\"https://mikecheng1208.github.io/Vue-path-recognizer/assets/screencast.gif\"\u003e\n\n## Installation\n```bash\nnpm install vue-path-recognizer --save\n```\n\n## Basic usage\n\nImport 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.\n\n```js\nimport PathRecognizer, { PathRecognizerModel } from 'vue-path-recognizer';\n\nexport default {\n  components: {\n    PathRecognizer,\n  },\n  data() {\n    return {\n      context: null,\n      result: \"\",\n      models: [\n        new PathRecognizerModel([7, 1], \"A\"),\n        new PathRecognizerModel([2, 6, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4], \"B\"),\n        new PathRecognizerModel([4, 3, 2, 1, 0], \"C\"),\n      ]\n    }\n  }\n}\n```\nAdd some path model to the recognizer.\nEach path is defined by a direction-sequence and an associated data object.\n\n```js\nmodels: [\n  new PathRecognizerModel([7, 1], \"A\"),\n  new PathRecognizerModel([2,6,0,1,2,3,4,0,1,2,3,4], \"B\"),\n  new PathRecognizerModel([4,3,2,1,0], \"C\"),\n  new PathRecognizerModel([2,6,7,0,1,2,3,4], \"D\"),\n  new PathRecognizerModel([4,3,2,1,0,4,3,2,1,0], \"E\")\n}\n```\nWrap your sliding template range\n```html\n\n\u003cpath-recognizer\n  :models=\"models\"\n  :onGesture=\"handleGesture\"\n  :onStartDraw=\"handleStartDraw\"\n  :onMovePath=\"handleMovePath\"\n\u003e\n  \u003ctemplate v-slot:default=\"props\"\u003e\n    \u003cdiv \n      @mousedown=\"props.onMouseDown\"\n      @mouseup=\"props.onMouseUp\"\n    \u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/path-recognizer\u003e\n\n```\n\nFor example, here the model for the letter E :\n\n![ScreenShot](https://mikecheng1208.github.io/Vue-path-recognizer/assets/directions.png)\n\nSet the models and the onGesture prop on the PathRecognizer component :\n\n```html\n  \u003cpath-recognizer\n    :models=\"models\"\n    :onGesture=\"handleGesture\"\n    :onStartDraw=\"handleStartDraw\"\n    :onMovePath=\"handleMovePath\"\n  \u003e\n  \u003c/path-recognizer\u003e\n```\n\nNote that onGesture({datas}) is always invoked at the end of the drawing. If no gesture is recognized, this parametter is null.\n\n## Custom filter\nWhile 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.\n\nFor example, the letter D \u0026 P have a similar draw-direction-path, however you can discriminate each one by detecting the position of the last point (up -\u003e it's a P, down -\u003e it's a D). The PathInfos struct transmited to the filter function will help you to determine the new score.\n\n```js\n filter(infos, model){\n    let lastPoint\n    switch (model.datas){\n      case \"P\":\n        lastPoint = [...infos.deltaPoints].pop()\n        if (lastPoint.y \u003e infos.boundingBox.top + infos.boundingBox.height * 0.6) return Number.POSITIVE_INFINITY\n        return infos.cost\n      case \"D\":\n        lastPoint = [...infos.deltaPoints].pop()\n        if (lastPoint.y \u003c infos.boundingBox.top + infos.boundingBox.height * 0.6) return Number.POSITIVE_INFINITY\n        return infos.cost\n   }\n}\n```\n\nFor a full example, please consult the example folder of this repo.\n\n## API\n\n### PathRecognizer props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003esliceCount\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e8\u003c/td\u003e\n          \u003ctd\u003eResolution of the direction wheel\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003edeltaMove\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e8\u003c/td\u003e\n          \u003ctd\u003eMouse move threshold (pixels)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ecostMax\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e32\u003c/td\u003e\n          \u003ctd\u003eMax cost limit to detect a gesture\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003emodels\u003c/td\u003e\n          \u003ctd\u003e[PathRecognizerModel([Number], Any)]\u003c/td\u003e\n          \u003ctd\u003e[]\u003c/td\u003e\n          \u003ctd\u003eModels to recognize\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonStartDraw\u003c/td\u003e\n          \u003ctd\u003eFunction()\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003eInvoked when the user mouse down the zone\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonMovePath\u003c/td\u003e\n          \u003ctd\u003eFunction([{x:Number, y:Number}])\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003eInvoked when the user move his mouse during a record session\u003c/td\u003e\n        \u003c/tr\u003e\n       \u003ctr\u003e\n          \u003ctd\u003eonStopDraw\u003c/td\u003e\n          \u003ctd\u003eFunction()\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003eInvoked when the user mouse up the zone\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonGesture\u003c/td\u003e\n          \u003ctd\u003eFunction(datas:Any)\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003eInvoked with the datas of the model recognized or null if no gesture is recognized\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n \u003c/table\u003e\n\n## Free path\n\nIn 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 :\n\n![ScreenShot](https://mikecheng1208.github.io/Vue-path-recognizer/assets/other_moves.gif)\n\n## References \u0026 Original Authors\n[Didier Brun](https://github.com/didierbrun)\n\u003cbr/\u003e\n\u003cbr/\u003e\n## License\nMIT © [MikeCheng1208](https://github.com/MikeCheng1208)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikecheng1208%2Fvue-path-recognizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikecheng1208%2Fvue-path-recognizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikecheng1208%2Fvue-path-recognizer/lists"}