Bezier-rs: Add project function for Subpaths (#914)

* Added subpath project function

* Set appropriate project default in single manipulator group case

* Lint

* Return optional from subpath project + stylistic changes per review

Co-authored-by: Keavon Chambers <keavon@keavon.com>

website/other/bezier-rs-demos/src/App.vue

@@ -19,7 +19,13 @@
 
 	<h2>Subpaths</h2>
 	<div v-for="(feature, index) in subpathFeatures" :key="index">
-		<SubpathExamplePane :name="feature.name" :callback="feature.callback" :sliderOptions="feature.sliderOptions" :chooseComputeType="feature.chooseComputeType" />
+		<SubpathExamplePane
+			:name="feature.name"
+			:callback="feature.callback"
+			:sliderOptions="feature.sliderOptions"
+			:triggerOnMouseMove="feature.triggerOnMouseMove"
+			:chooseComputeType="feature.chooseComputeType"
+		/>
 	</div>
 </template>
 
@@ -605,6 +611,12 @@ export default defineComponent({
 					sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
 					chooseComputeType: true,
 				},
+				{
+					name: "Project",
+					callback: (subpath: WasmSubpathInstance, _: Record<string, number>, mouseLocation?: [number, number]): string =>
+						mouseLocation ? subpath.project(mouseLocation[0], mouseLocation[1]) : subpath.to_svg(),
+					triggerOnMouseMove: true,
+				},
 				{
 					name: "Intersect (Line Segment)",
 					callback: (subpath: WasmSubpathInstance): string =>

website/other/bezier-rs-demos/src/components/SubpathExample.vue

@@ -27,6 +27,7 @@ export default defineComponent({
 		closed: { type: Boolean as PropType<boolean>, default: false },
 		callback: { type: Function as PropType<SubpathCallback>, required: true },
 		sliderOptions: { type: Object as PropType<Array<SliderOption>>, default: () => ({}) },
+		triggerOnMouseMove: { type: Boolean as PropType<boolean>, default: false },
 		computeType: { type: String as PropType<ComputeType>, default: "Parametric" },
 	},
 	data() {
@@ -68,6 +69,8 @@ export default defineComponent({
 				this.subpath[POINT_INDEX_TO_MANIPULATOR[this.activeIndex[1]]](this.activeIndex[0], mx, my);
 				this.mutableTriples[this.activeIndex[0]][this.activeIndex[1]] = [mx, my];
 				this.subpathSVG = this.callback(this.subpath, this.sliderData, [mx, my], this.computeType);
+			} else if (this.triggerOnMouseMove) {
+				this.subpathSVG = this.callback(this.subpath, this.sliderData, [mx, my], this.computeType);
 			}
 		},
 		getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),

website/other/bezier-rs-demos/src/components/SubpathExamplePane.vue

@@ -12,7 +12,15 @@
 		</div>
 		<div class="example-row">
 			<div v-for="(example, index) in examples" :key="index">
-				<SubpathExample :title="example.title" :triples="example.triples" :closed="example.closed" :callback="callback" :sliderOptions="sliderOptions" :computeType="computeTypeChoice" />
+				<SubpathExample
+					:title="example.title"
+					:triples="example.triples"
+					:closed="example.closed"
+					:callback="callback"
+					:sliderOptions="sliderOptions"
+					:triggerOnMouseMove="triggerOnMouseMove"
+					:computeType="computeTypeChoice"
+				/>
 			</div>
 		</div>
 	</div>
@@ -32,6 +40,7 @@ export default defineComponent({
 		name: { type: String as PropType<string>, required: true },
 		callback: { type: Function as PropType<SubpathCallback>, required: true },
 		sliderOptions: { type: Array as PropType<Array<SliderOption>>, default: () => [] },
+		triggerOnMouseMove: { type: Boolean as PropType<boolean>, default: false },
 		chooseComputeType: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {

website/other/bezier-rs-demos/wasm/src/subpath.rs

@@ -1,6 +1,6 @@
 use crate::svg_drawing::*;
 
-use bezier_rs::{Bezier, ComputeType, ManipulatorGroup, Subpath};
+use bezier_rs::{Bezier, ComputeType, ManipulatorGroup, ProjectionOptions, Subpath};
 
 use glam::DVec2;
 use wasm_bindgen::prelude::*;
@@ -68,6 +68,15 @@ impl WasmSubpath {
 		wrap_svg_tag(format!("{}{}", self.to_default_svg(), point_text))
 	}
 
+	pub fn project(&self, x: f64, y: f64) -> String {
+		let (segment_index, projected_t) = self.0.project(DVec2::new(x, y), ProjectionOptions::default()).unwrap();
+		let projected_point = self.0.evaluate(ComputeType::Parametric((segment_index as f64 + projected_t) / (self.0.len_segments() as f64)));
+
+		let subpath_svg = self.to_default_svg();
+		let content = format!("{subpath_svg}{}", draw_line(projected_point.x, projected_point.y, x, y, RED, 1.),);
+		wrap_svg_tag(content)
+	}
+
 	pub fn intersect_line_segment(&self, js_points: JsValue) -> String {
 		let points: [DVec2; 2] = serde_wasm_bindgen::from_value(js_points).unwrap();
 		let line = Bezier::from_linear_dvec2(points[0], points[1]);