martonlederer · behroozkhorashadi · Jan 21, 2023 · Feb 2, 2023 · Feb 14, 2023 · Feb 14, 2023
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,10 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ]
+}
diff --git a/__test__/gesture_utils.test.ts b/__test__/gesture_utils.test.ts
@@ -0,0 +1,318 @@
+import {
+  anglesHaveGesturePresent,
+  findCenter,
+  generateAngles,
+  GestureDetectionResult,
+  GestureRecognizer
+} from "../src/gesture_utils";
+describe("All about angles", () => {
+  it("checkAngles should detect circle", async () => {
+    const angles = [
+      119.13249100248731, 175.5081703592017, 260.7040128734326,
+      319.40785803535107, 63.03466382450584, 120.27204568976218,
+      173.67113632784708, 241.832449169218, 316.16472962349485,
+      43.0466443842559, 108.87430280800642, 148.63005019250022,
+      284.26099944654766, 332.06005157100975, 332.3075021483307,
+      10.515332213760514
+    ];
+    expect(anglesHaveGesturePresent(angles, 720)).toBe(
+      GestureDetectionResult.GestureDetected
+    );
+  });
+  it("should detect circle with more points", () => {
+    const angles = [
+      97.27259427185287, 137.86893876480332, 232.61979742674515,
+      294.1481493559956, 1.5048654039468068, 78.77134260164064,
+      148.23034575574286, 282.37945128760003, 333.37551338831474,
+      81.04654804959658, 122.00854078320982, 227.4924623710147, 278.58330514789,
+      333.1569388412458, 103.00096764172706, 164.28151284307208,
+      248.12936139220977, 304.30820434667424, 8.09047567826277,
+      92.60664222666959, 148.59321713837718, 302.51724413637174,
+      347.3615969093159, 89.16056146628767, 119.95614189308353,
+      204.51305409210138, 287.8861943905169, 349.9701114862735,
+      107.80627127967439, 225.76768078645028, 283.55521595751065,
+      335.06457229853135, 87.93849977439129, 129.65085114730417,
+      178.80635616367832
+    ];
+    expect(anglesHaveGesturePresent(angles, 720)).toBe(
+      GestureDetectionResult.GestureDetected
+    );
+  });
+  it("should not detect a circle and should splice non circular entries", () => {
+    const angles = [
+      226.19061814853652, 212.13930636631184, 185.77811906912663,
+      147.29877513599112, 124.23689682553973, 109.32477588232898,
+      103.4957332807958, 102.78445300179973, 84.43061436234746,
+      72.8371744557437, 69.6108352197183, 53.869579958295695, 32.05323506793447,
+      332.7981025509856, 288.1795981843835, 281.21884228126885,
+      275.5258689249448, 272.8291286488402
+    ];
+    expect(anglesHaveGesturePresent(angles, 720)).toBe(
+      GestureDetectionResult.NotDetected
+    );
+  });
+  it("should not detect figure 8", () => {
+    const angles = [
+      35.498504287314155, 48.93167148002223, 103.12412438305016,
+      136.79627838946584, 185.4891365313199, 227.9650917724249,
+      268.0984303858467, 307.4297023963105, 329.0961859161738,
+      343.83300571298383, 66.10120836384127, 128.44402363017232,
+      115.1791333262658, 99.51415106416525, 78.555363468865, 49.52598292223274,
+      18.77890345877097, 336.0415354532801, 253.20858116805846,
+      167.59258147259928, 175.12951938267352, 203.6929725538815,
+      239.03459717940257, 275.51713597898805, 304.18220907670553,
+      324.7830475516337, 3.090269031411277, 131.30117734936658,
+      126.07775214598243
+    ];
+    expect(anglesHaveGesturePresent(angles, 720)).toBe(
+      GestureDetectionResult.NotDetected
+    );
+  });
+  it("should not detect giggle mouse movement", () => {
+    const angles = [
+      75.43484483407028, 73.40796253668634, 300.7347310423032,
+      270.47832872834226, 282.15943439150016, 79.95276307588158,
+      82.74639442916599, 266.82572736139934, 267.065106367383,
+      110.82009553378884, 110.92777053066744, 263.25185888409567,
+      268.4206297042111, 284.9734871304472, 84.71957044629404,
+      279.98470689645325, 262.71404087351976, 223.00951108613268,
+      110.33254735820988, 99.70968803922608, 270.5925557679406,
+      268.7487468969184, 48.65032201299358, 63.09343380465819,
+      300.6843408162246, 287.9718677988298, 98.44228415041498,
+      98.45752917067682, 97.59464336859145, 274.2075173569893,
+      275.74803523608296, 84.47485345570813, 270.12533921381777
+    ];
+    const anglesLength = angles.length;
+    expect(anglesHaveGesturePresent(angles, 720)).toBe(
+      GestureDetectionResult.NotDetected
+    );
+  });
+});
+
+describe("All about centers and angles", () => {
+  it("should find the center point of the group.", () => {
+    const points = [
+      { x: 10, y: 20, ms: 0 },
+      { x: 11, y: 21, ms: 0 },
+      { x: 12, y: 22, ms: 0 },
+      { x: 13, y: 23, ms: 0 },
+      { x: 14, y: 24, ms: 0 },
+      { x: 15, y: 25, ms: 0 },
+      { x: 16, y: 26, ms: 0 },
+      { x: 17, y: 27, ms: 0 },
+      { x: 18, y: 28, ms: 0 },
+      { x: 19, y: 29, ms: 0 },
+      { x: 20, y: 30, ms: 0 }
+    ];
+    const center = { centerX: 15, centerY: 25 };
+    expect(findCenter(points)).toStrictEqual(center);
+    expect(
+      generateAngles(points, center.centerX, center.centerY)
+    ).toStrictEqual([
+      315, 315, 315, 315, 315, 1.5707963267948966, 135, 135, 135, 135, 135
+    ]);
+  });
+
+  it("should find the center point of random points of a single circle.", () => {
+    const points = [
+      { x: 618, y: 515, ms: 7155 },
+      { x: 495, y: 586, ms: 7972 },
+      { x: 357, y: 576, ms: 8555 },
+      { x: 284, y: 520, ms: 9088.700000047684 },
+      { x: 193, y: 420, ms: 10255 },
+      { x: 196, y: 353, ms: 10848.400000095367 },
+      { x: 210, y: 187, ms: 11405.800000071526 },
+      { x: 485, y: 165, ms: 11971.200000047684 },
+      { x: 588, y: 180, ms: 13388.100000023842 },
+      { x: 690, y: 252, ms: 13956.200000047684 },
+      { x: 728, y: 415, ms: 14520.700000047684 },
+      { x: 559, y: 558, ms: 15004.800000071526 },
+      { x: 415, y: 539, ms: 15454.800000071526 },
+      { x: 270, y: 529, ms: 15953.800000071526 },
+      { x: 145, y: 357, ms: 16521.5 },
+      { x: 249, y: 155, ms: 17037.900000095367 },
+      { x: 444, y: 145, ms: 17554.800000071526 }
+    ];
+    const center = { centerX: 407.4117647058824, centerY: 379.52941176470586 };
+    expect(findCenter(points)).toStrictEqual(center);
+    const angles = generateAngles(points, center.centerX, center.centerY);
+    expect(angles).toStrictEqual([
+      122.75301823378237, 157.0125408242657, 194.39088679678636,
+      221.30122873917264, 259.3110781984934, 277.15248410398624,
+      314.2826518003633, 19.883391543562766, 42.1473237618413,
+      65.71079131144626, 96.31365149991173, 139.65630044826864,
+      177.27569727035907, 222.59304398349045, 274.9071066646488,
+      324.79596397748094, 8.86706886227751
+    ]);
+    expect(anglesHaveGesturePresent(angles, 720)).toBe(
+      GestureDetectionResult.PartcialDetection
+    );
+  });
+
+  it("should detect a single circle.", () => {
+    const points = [
+      { x: 618, y: 515, ms: 7155 },
+      { x: 495, y: 586, ms: 7972 },
+      { x: 357, y: 576, ms: 8555 },
+      { x: 284, y: 520, ms: 9088.700000047684 },
+      { x: 193, y: 420, ms: 10255 },
+      { x: 196, y: 353, ms: 10848.400000095367 },
+      { x: 210, y: 187, ms: 11405.800000071526 },
+      { x: 485, y: 165, ms: 11971.200000047684 },
+      { x: 588, y: 180, ms: 13388.100000023842 },
+      { x: 690, y: 252, ms: 13956.200000047684 },
+      { x: 728, y: 415, ms: 14520.700000047684 },
+      { x: 559, y: 558, ms: 15004.800000071526 },
+      { x: 415, y: 539, ms: 15454.800000071526 },
+      { x: 270, y: 529, ms: 15953.800000071526 },
+      { x: 145, y: 357, ms: 16521.5 },
+      { x: 249, y: 155, ms: 17037.900000095367 },
+      { x: 444, y: 145, ms: 17554.800000071526 }
+    ];
+    const center = { centerX: 407.4117647058824, centerY: 379.52941176470586 };
+    expect(findCenter(points)).toStrictEqual(center);
+    const angles = generateAngles(points, center.centerX, center.centerY);
+    expect(angles).toStrictEqual([
+      122.75301823378237, 157.0125408242657, 194.39088679678636,
+      221.30122873917264, 259.3110781984934, 277.15248410398624,
+      314.2826518003633, 19.883391543562766, 42.1473237618413,
+      65.71079131144626, 96.31365149991173, 139.65630044826864,
+      177.27569727035907, 222.59304398349045, 274.9071066646488,
+      324.79596397748094, 8.86706886227751
+    ]);
+    expect(anglesHaveGesturePresent(angles, 360)).toBe(
+      GestureDetectionResult.GestureDetected
+    );
+  });
+
+  it("should find the a double loop", () => {
+    const points = [
+      { x: 438, y: 106, ms: 1726.8999999761581 },
+      { x: 548, y: 128, ms: 2344.5 },
+      { x: 609, y: 166, ms: 2894.5999999046326 },
+      { x: 661, y: 217, ms: 3410.1999999284744 },
+      { x: 723, y: 253, ms: 4011.399999976158 },
+      { x: 749, y: 406, ms: 4559 },
+      { x: 671, y: 531, ms: 5044.299999952316 },
+      { x: 503, y: 555, ms: 5511 },
+      { x: 351, y: 521, ms: 6011.099999904633 },
+      { x: 223, y: 483, ms: 6494 },
+      { x: 182, y: 402, ms: 6994.599999904633 },
+      { x: 175, y: 322, ms: 7444.099999904633 },
+      { x: 194, y: 208, ms: 7960.399999976158 },
+      { x: 237, y: 153, ms: 8494.899999976158 },
+      { x: 330, y: 108, ms: 8977.799999952316 },
+      { x: 420, y: 101, ms: 9460.799999952316 },
+      { x: 537, y: 99, ms: 9943.599999904633 },
+      { x: 650, y: 144, ms: 10443.399999976158 },
+      { x: 752, y: 197, ms: 10926.899999976158 },
+      { x: 775, y: 307, ms: 11427.899999976158 },
+      { x: 771, y: 409, ms: 11877.299999952316 },
+      { x: 666, y: 518, ms: 12344.5 },
+      { x: 617, y: 543, ms: 12844 },
+      { x: 527, y: 539, ms: 13277.299999952316 },
+      { x: 369, y: 522, ms: 13760.5 },
+      { x: 222, y: 494, ms: 14209.799999952316 },
+      { x: 144, y: 382, ms: 14677.5 },
+      { x: 114, y: 219, ms: 15127.699999928474 },
+      { x: 272, y: 162, ms: 15560.599999904633 },
+      { x: 280, y: 118, ms: 16027.099999904633 },
+      { x: 367, y: 92, ms: 16444.099999904633 },
+      { x: 457, y: 84, ms: 16893.599999904633 },
+      { x: 642, y: 88, ms: 17377.399999976158 },
+      { x: 688, y: 148, ms: 17844.099999904633 },
+      { x: 762, y: 239, ms: 18344.099999904633 },
+      { x: 768, y: 374, ms: 18827.5 },
+      { x: 721, y: 486, ms: 19327.199999928474 },
+      { x: 712, y: 492, ms: 20044.199999928474 },
+      { x: 588, y: 537, ms: 20544.099999904633 }
+    ];
+    const center = { centerX: 497.8205128205128, centerY: 303.9230769230769 };
+    expect(findCenter(points)).toStrictEqual(center);
+    const angles = generateAngles(points, center.centerX, center.centerY);
+    expect(angles).toStrictEqual([
+      343.18301881813863, 15.920024752068024, 38.872210541563575,
+      61.95649281636506, 77.25722278019785, 112.11635097715953,
+      142.66916144520977, 178.81820811791735, 214.07255198697015,
+      236.91116701315303, 252.74800662131838, 266.79496553577536,
+      287.5220969822299, 300.0557030744232, 319.41785398096204,
+      339.0183011039728, 10.823824913340655, 43.5787236155253, 67.1854696545574,
+      90.63600473113492, 111.0389525012068, 141.84671366249208,
+      153.5038139093678, 172.92421606948594, 210.5708284609924,
+      235.42800454990427, 257.5560709558628, 282.4761107673676,
+      302.1484311421117, 310.4827759977166, 328.3128886658296, 349.484842994645,
+      33.73244024955, 50.652589565859635, 76.19296986246333, 104.54049356467422,
+      129.20865960528863, 131.28726143352927, 158.84811281441523
+    ]);
+    expect(anglesHaveGesturePresent(angles, 720)).toBe(
+      GestureDetectionResult.GestureDetected
+    );
+  });
+});
+
+describe("GestureRecognizer", () => {
+  it("GestureRecognizer should find the a double loop", async () => {
+    let gestureDetected = false;
+    const recognizer = new GestureRecognizer(
+      () => (gestureDetected = true),
+      100000,
+      900
+    );
+    let counter = 0;
+    Object.defineProperty(performance, "now", {
+      value: jest.fn(),
+      configurable: true,
+      writable: true
+    });
+    jest.spyOn(performance, "now").mockImplementation(() => {
+      counter += 25;
+      return counter;
+    });
+    const points = [
+      { x: 438, y: 106, ms: 1726.8999999761581 },
+      { x: 548, y: 128, ms: 2344.5 },
+      { x: 609, y: 166, ms: 2894.5999999046326 },
+      { x: 661, y: 217, ms: 3410.1999999284744 },
+      { x: 723, y: 253, ms: 4011.399999976158 },
+      { x: 749, y: 406, ms: 4559 },
+      { x: 671, y: 531, ms: 5044.299999952316 },
+      { x: 503, y: 555, ms: 5511 },
+      { x: 351, y: 521, ms: 6011.099999904633 },
+      { x: 223, y: 483, ms: 6494 },
+      { x: 182, y: 402, ms: 6994.599999904633 },
+      { x: 175, y: 322, ms: 7444.099999904633 },
+      { x: 194, y: 208, ms: 7960.399999976158 },
+      { x: 237, y: 153, ms: 8494.899999976158 },
+      { x: 330, y: 108, ms: 8977.799999952316 },
+      { x: 420, y: 101, ms: 9460.799999952316 },
+      { x: 537, y: 99, ms: 9943.599999904633 },
+      { x: 650, y: 144, ms: 10443.399999976158 },
+      { x: 752, y: 197, ms: 10926.899999976158 },
+      { x: 775, y: 307, ms: 11427.899999976158 },
+      { x: 771, y: 409, ms: 11877.299999952316 },
+      { x: 666, y: 518, ms: 12344.5 },
+      { x: 617, y: 543, ms: 12844 },
+      { x: 527, y: 539, ms: 13277.299999952316 },
+      { x: 369, y: 522, ms: 13760.5 },
+      { x: 222, y: 494, ms: 14209.799999952316 },
+      { x: 144, y: 382, ms: 14677.5 },
+      { x: 114, y: 219, ms: 15127.699999928474 },
+      { x: 272, y: 162, ms: 15560.599999904633 },
+      { x: 280, y: 118, ms: 16027.099999904633 },
+      { x: 367, y: 92, ms: 16444.099999904633 },
+      { x: 457, y: 84, ms: 16893.599999904633 },
+      { x: 642, y: 88, ms: 17377.399999976158 },
+      { x: 688, y: 148, ms: 17844.099999904633 },
+      { x: 762, y: 239, ms: 18344.099999904633 },
+      { x: 768, y: 374, ms: 18827.5 },
+      { x: 721, y: 486, ms: 19327.199999928474 },
+      { x: 712, y: 492, ms: 20044.199999928474 },
+      { x: 588, y: 537, ms: 20544.099999904633 }
+    ];
+
+    for (const point of points) {
+      await recognizer.addMouseMoveEvent(point.x, point.y);
+    }
+    expect(gestureDetected).toBe(true);
+  });
+});
diff --git a/esbuild.js b/esbuild.js
@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const esbuild = require("esbuild");
 
 esbuild

diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,9 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.ts?$": "ts-jest"
+  },
+  transformIgnorePatterns: ["<rootDir>/node_modules/"]
+};
diff --git a/notes.txt b/notes.txt
@@ -0,0 +1,2 @@
+eslint instructions
+https://khalilstemmler.com/blogs/typescript/eslint-for-typescript/
diff --git a/package.json b/package.json
@@ -1,23 +1,37 @@
 {
   "scripts": {
     "build": "NODE_ENV=\"production\" node esbuild.js",
+    "devbuild": "NODE_ENV=\"devbuild\" node esbuild.js",
     "fmt": "prettier --write .",
-    "fmt:check": "prettier --check ."
+    "fmt:check": "prettier --check .",
+    "lint": "eslint . --ext .ts",
+    "test": "jest"
   },
   "gitHooks": {
     "pre-commit": "prettier --write . && git add -A"
   },
-  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.12.13",
-    "@types/chrome": "^0.0.129",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
+    "@types/chrome": "^0.0.216",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
     "esbuild": "^0.8.46",
-    "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "eslint": "^8.34.0",
+    "jest": "^29.4.3",
+    "prettier": "^2.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.1.3",
-    "yorkie": "^2.0.0"
+    "yorkie": "^2.0.0",
+    "react-error-overlay": "6.0.9"
+  },
+  "dependencies": {
+    "framer-motion": "^9.0.2",
+    "konva": "^8.4.2",
+    "react-konva": "^18.2.4"
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		eslint instructions
		https://khalilstemmler.com/blogs/typescript/eslint-for-typescript/