Implement function that projects to a Bezier curve (#688)

* UI section for the projection function

* added bezier project impl

* Fix project function and add test for it

* Search method

* Re-use comptued distances

* Update comments

* rebase project changes

* clean up tests and library code

* use built-in functions and destructure syntax

* Remove redundant project implementation

* Fix typo, add lut size as parameter and add constant

* address comments

Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>

bezier-rs/docs/interactive-docs/src/App.vue

@@ -21,7 +21,7 @@
 import { defineComponent, markRaw } from "vue";
 
 import { drawText, drawPoint, drawBezier, drawLine, getContextFromCanvas, drawBezierHelper, COLORS } from "@/utils/drawing";
-import { WasmBezierInstance } from "@/utils/types";
+import { Point, WasmBezierInstance } from "@/utils/types";
 
 import ExamplePane from "@/components/ExamplePane.vue";
 import SliderExample from "@/components/SliderExample.vue";
@@ -226,6 +226,16 @@ export default defineComponent({
 						],
 					},
 				},
+				{
+					name: "Project",
+					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation: Point | null): void => {
+						if (mouseLocation != null) {
+							const context = getContextFromCanvas(canvas);
+							const closestPoint = JSON.parse(bezier.project(mouseLocation.x, mouseLocation.y));
+							drawLine(context, mouseLocation, closestPoint, COLORS.NON_INTERACTIVE.STROKE_1);
+						}
+					},
+				},
 			],
 		};
 	},

bezier-rs/docs/interactive-docs/src/components/BezierDrawing.ts

@@ -1,6 +1,6 @@
 import { WasmBezier } from "@/../wasm/pkg";
 import { COLORS, drawBezier, drawPoint, getContextFromCanvas, getPointSizeByIndex } from "@/utils/drawing";
-import { BezierCallback, BezierPoint, BezierStyleConfig, WasmBezierMutatorKey, WasmBezierInstance } from "@/utils/types";
+import { BezierCallback, BezierPoint, BezierStyleConfig, Point, WasmBezierMutatorKey, WasmBezierInstance } from "@/utils/types";
 
 // Offset to increase selectable range, used to make points easier to grab
 const FUDGE_FACTOR = 3;
@@ -81,10 +81,9 @@ class BezierDrawing {
 				selectedPoint.x = mx;
 				selectedPoint.y = my;
 				this.bezier[selectedPoint.mutator](selectedPoint.x, selectedPoint.y);
-				this.clearFigure();
 			}
 		}
-		this.updateBezier();
+		this.updateBezier({ x: mx, y: my });
 	}
 
 	mouseDownHandler(evt: MouseEvent): void {
@@ -102,13 +101,13 @@ class BezierDrawing {
 
 	deselectPointHandler(): void {
 		if (this.dragIndex !== undefined) {
-			this.clearFigure();
 			this.dragIndex = null;
 			this.updateBezier();
 		}
 	}
 
-	updateBezier(options: Record<string, number> = {}): void {
+	updateBezier(mouseLocation?: Point, options: Record<string, number> = {}): void {
+		this.clearFigure();
 		if (Object.values(options).length !== 0) {
 			this.options = options;
 		}
@@ -146,7 +145,7 @@ class BezierDrawing {
 			// Draw the point that the curve was drawn through
 			drawPoint(this.ctx, this.points[1], getPointSizeByIndex(1, this.points.length), this.dragIndex === 1 ? COLORS.INTERACTIVE.SELECTED : COLORS.INTERACTIVE.STROKE_1);
 		}
-		this.callback(this.canvas, this.bezier, this.options);
+		this.callback(this.canvas, this.bezier, this.options, mouseLocation);
 	}
 
 	getCanvas(): HTMLCanvasElement {

bezier-rs/docs/interactive-docs/src/components/Example.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 		options: {
 			deep: true,
 			handler() {
-				this.bezierDrawing.updateBezier(this.options);
+				this.bezierDrawing.updateBezier(undefined, this.options);
 			},
 		},
 	},

bezier-rs/docs/interactive-docs/src/utils/types.ts

@@ -4,7 +4,7 @@ export type WasmBezierInstance = InstanceType<WasmRawInstance["WasmBezier"]>;
 export type WasmBezierKey = keyof WasmBezierInstance;
 export type WasmBezierMutatorKey = "set_start" | "set_handle_start" | "set_handle_end" | "set_end";
 
-export type BezierCallback = (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>) => void;
+export type BezierCallback = (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: Point) => void;
 
 export type SliderOption = {
 	min: number;