Bezier-rs: Add Euclidean parameterization to Bezier::evaluate (#828)

* Add enum to evaluate for differenciating compute type

* Add euclidean parameterization and update styling in the UI

Co-authored-by: Rob Nadal <robnadal44@gmail.com>

* Update usage of evaluate in graphite

* Add description

* Code review changes

* Update tests

* Improve ComputeType ergonomics

* Large code review/cleanup pass

Co-authored-by: Rob Nadal <robnadal44@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>

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

@@ -1,23 +1,69 @@
 <template>
-	<div class="App">
-		<h1>Bezier-rs Interactive Documentation</h1>
-		<p>This is the interactive documentation for the <b>bezier-rs</b> library. Click and drag on the endpoints of the example curves to visualize the various Bezier utilities and functions.</p>
-		<h2>Beziers</h2>
-		<div v-for="(feature, index) in bezierFeatures" :key="index">
-			<BezierExamplePane :name="feature.name" :callback="feature.callback" :exampleOptions="feature.exampleOptions" :triggerOnMouseMove="feature.triggerOnMouseMove" />
-		</div>
-		<h2>Subpaths</h2>
-		<div v-for="(feature, index) in subpathFeatures" :key="index">
-			<SubpathExamplePane :name="feature.name" :callback="feature.callback" />
-		</div>
+	<h1>Bezier-rs Interactive Documentation</h1>
+	<p>This is the interactive documentation for the <b>bezier-rs</b> library. Click and drag on the endpoints of the example curves to visualize the various Bezier utilities and functions.</p>
+	<h2>Beziers</h2>
+	<div v-for="(feature, index) in bezierFeatures" :key="index">
+		<BezierExamplePane
+			:name="feature.name"
+			:callback="feature.callback"
+			:exampleOptions="feature.exampleOptions"
+			:triggerOnMouseMove="feature.triggerOnMouseMove"
+			:chooseComputeType="feature.chooseComputeType"
+		/>
+	</div>
+	<h2>Subpaths</h2>
+	<div v-for="(feature, index) in subpathFeatures" :key="index">
+		<SubpathExamplePane :name="feature.name" :callback="feature.callback" />
 	</div>
 </template>
 
+<style>
+#app {
+	font-family: Arial, sans-serif;
+	text-align: center;
+	margin: 40px 0;
+}
+
+/* Example Pane styles */
+.example-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.compute-type-choice {
+	margin-top: 20px;
+}
+
+.example-pane-header {
+	margin-top: 2em;
+	margin-bottom: 0;
+}
+
+.example-pane-container {
+	position: relative;
+	width: fit-content;
+	margin: auto;
+}
+
+/* Example styles */
+.example-header {
+	margin: 20px 0;
+}
+
+.example-figure {
+	width: 200px;
+	height: 200px;
+	margin-bottom: 20px;
+	border: solid 1px black;
+}
+</style>
+
 <script lang="ts">
 import { defineComponent } from "vue";
 
 import { WasmBezier } from "@/../wasm/pkg";
-import { BezierCurveType, ExampleOptions, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
+import { ComputeType, ExampleOptions, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
 
 import BezierExamplePane from "@/components/BezierExamplePane.vue";
 import SubpathExamplePane from "@/components/SubpathExamplePane.vue";
@@ -56,10 +102,10 @@ export default defineComponent({
 						return WasmBezier.cubic_through_points(points, options.t, options["midpoint separation"]);
 					},
 					exampleOptions: {
-						[BezierCurveType.Linear]: {
+						Linear: {
 							disabled: true,
 						},
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							customPoints: [
 								[30, 50],
 								[120, 70],
@@ -75,7 +121,7 @@ export default defineComponent({
 								},
 							],
 						},
-						[BezierCurveType.Cubic]: {
+						Cubic: {
 							customPoints: [
 								[30, 50],
 								[120, 70],
@@ -106,18 +152,19 @@ export default defineComponent({
 				},
 				{
 					name: "Evaluate",
-					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.evaluate(options.t),
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => bezier.evaluate(options.computeArgument, computeType),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
-							sliderOptions: [tSliderOptions],
+						Quadratic: {
+							sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
 						},
 					},
+					chooseComputeType: true,
 				},
 				{
 					name: "Lookup Table",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.compute_lookup_table(options.steps),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [
 								{
 									min: 2,
@@ -134,17 +181,17 @@ export default defineComponent({
 					name: "Derivative",
 					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.derivative(),
 					exampleOptions: {
-						[BezierCurveType.Linear]: {
+						Linear: {
 							disabled: true,
 						},
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							customPoints: [
 								[30, 40],
 								[110, 50],
 								[120, 130],
 							],
 						},
-						[BezierCurveType.Cubic]: {
+						Cubic: {
 							customPoints: [
 								[50, 50],
 								[60, 100],
@@ -158,7 +205,7 @@ export default defineComponent({
 					name: "Tangent",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.tangent(options.t),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [tSliderOptions],
 						},
 					},
@@ -168,7 +215,7 @@ export default defineComponent({
 					name: "Normal",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.normal(options.t),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [tSliderOptions],
 						},
 					},
@@ -177,10 +224,10 @@ export default defineComponent({
 					name: "Curvature",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.curvature(options.t),
 					exampleOptions: {
-						[BezierCurveType.Linear]: {
+						Linear: {
 							disabled: true,
 						},
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [tSliderOptions],
 						},
 					},
@@ -189,7 +236,7 @@ export default defineComponent({
 					name: "Split",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.split(options.t),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [tSliderOptions],
 						},
 					},
@@ -198,7 +245,7 @@ export default defineComponent({
 					name: "Trim",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.trim(options.t1, options.t2),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [
 								{
 									variable: "t1",
@@ -228,14 +275,14 @@ export default defineComponent({
 					name: "Local Extrema",
 					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.local_extrema(),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							customPoints: [
 								[40, 40],
 								[160, 30],
 								[110, 150],
 							],
 						},
-						[BezierCurveType.Cubic]: {
+						Cubic: {
 							customPoints: [
 								[160, 180],
 								[170, 10],
@@ -253,10 +300,10 @@ export default defineComponent({
 					name: "Inflections",
 					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.inflections(),
 					exampleOptions: {
-						[BezierCurveType.Linear]: {
+						Linear: {
 							disabled: true,
 						},
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							disabled: true,
 						},
 					},
@@ -269,7 +316,7 @@ export default defineComponent({
 					name: "Offset",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.offset(options.distance),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [
 								{
 									variable: "distance",
@@ -286,7 +333,7 @@ export default defineComponent({
 					name: "Outline",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.outline(options.distance),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [
 								{
 									variable: "distance",
@@ -303,7 +350,7 @@ export default defineComponent({
 					name: "Graduated Outline",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.graduated_outline(options.start_distance, options.end_distance),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [
 								{
 									variable: "start_distance",
@@ -328,7 +375,7 @@ export default defineComponent({
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string =>
 						bezier.skewed_outline(options.distance1, options.distance2, options.distance3, options.distance4),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [
 								{
 									variable: "distance1",
@@ -392,7 +439,7 @@ export default defineComponent({
 						];
 
 						return {
-							[BezierCurveType.Quadratic]: {
+							Quadratic: {
 								customPoints: [
 									[50, 50],
 									[85, 65],
@@ -401,7 +448,7 @@ export default defineComponent({
 								sliderOptions,
 								disabled: false,
 							},
-							[BezierCurveType.Cubic]: {
+							Cubic: {
 								customPoints: [
 									[160, 180],
 									[170, 10],
@@ -435,7 +482,7 @@ export default defineComponent({
 						return bezier.intersect_quadratic_segment(quadratic, options.error);
 					},
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [tErrorOptions],
 						},
 					},
@@ -452,7 +499,7 @@ export default defineComponent({
 						return bezier.intersect_cubic_segment(cubic, options.error);
 					},
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [tErrorOptions],
 						},
 					},
@@ -461,10 +508,10 @@ export default defineComponent({
 					name: "Intersect (Self)",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.intersect_self(options.error),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [tErrorOptions],
 						},
-						[BezierCurveType.Cubic]: {
+						Cubic: {
 							customPoints: [
 								[160, 180],
 								[170, 10],
@@ -478,7 +525,7 @@ export default defineComponent({
 					name: "Rotate",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.rotate(options.angle * Math.PI, 100, 100),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [
 								{
 									variable: "angle",
@@ -496,7 +543,7 @@ export default defineComponent({
 					name: "De Casteljau Points",
 					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.de_casteljau_points(options.t),
 					exampleOptions: {
-						[BezierCurveType.Quadratic]: {
+						Quadratic: {
 							sliderOptions: [tSliderOptions],
 						},
 					},
@@ -520,12 +567,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style>
-#app {
-	font-family: Arial, sans-serif;
-	text-align: center;
-	color: #2c3e50;
-	margin-top: 60px;
-}
-</style>

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

@@ -9,42 +9,31 @@
 	</div>
 </template>
 
+<style></style>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
 import { WasmBezier } from "@/../wasm/pkg";
-import { getConstructorKey, getCurveType } from "@/utils/helpers";
-import { BezierCallback, BezierCurveType, WasmBezierManipulatorKey, SliderOption } from "@/utils/types";
+import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, WasmBezierManipulatorKey, SliderOption, ComputeType } from "@/utils/types";
 
 const SELECTABLE_RANGE = 10;
 
 // Given the number of points in the curve, map the index of a point to the correct manipulator key
 const MANIPULATOR_KEYS_FROM_BEZIER_TYPE: { [key in BezierCurveType]: WasmBezierManipulatorKey[] } = {
-	[BezierCurveType.Linear]: ["set_start", "set_end"],
-	[BezierCurveType.Quadratic]: ["set_start", "set_handle_start", "set_end"],
-	[BezierCurveType.Cubic]: ["set_start", "set_handle_start", "set_handle_end", "set_end"],
+	Linear: ["set_start", "set_end"],
+	Quadratic: ["set_start", "set_handle_start", "set_end"],
+	Cubic: ["set_start", "set_handle_start", "set_handle_end", "set_end"],
 };
 
 export default defineComponent({
 	props: {
-		title: String,
-		points: {
-			type: Array as PropType<Array<Array<number>>>,
-			required: true,
-			mutable: true,
-		},
-		callback: {
-			type: Function as PropType<BezierCallback>,
-			required: true,
-		},
-		sliderOptions: {
-			type: Object as PropType<Array<SliderOption>>,
-			default: () => ({}),
-		},
-		triggerOnMouseMove: {
-			type: Boolean,
-			default: false,
-		},
+		title: { type: String as PropType<string>, required: true },
+		points: { type: Array as PropType<Array<Array<number>>>, required: true, mutable: true },
+		callback: { type: Function as PropType<BezierCallback>, 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() {
 		const curveType = getCurveType(this.points.length);
@@ -55,7 +44,7 @@ export default defineComponent({
 
 		return {
 			bezier,
-			bezierSVG: this.callback(bezier, sliderData),
+			bezierSVG: this.callback(bezier, sliderData, undefined, "Euclidean"),
 			manipulatorKeys,
 			activeIndex: undefined as number | undefined,
 			mutablePoints: JSON.parse(JSON.stringify(this.points)),
@@ -84,9 +73,9 @@ export default defineComponent({
 			if (this.activeIndex !== undefined) {
 				this.bezier[this.manipulatorKeys[this.activeIndex]](mx, my);
 				this.mutablePoints[this.activeIndex] = [mx, my];
-				this.bezierSVG = this.callback(this.bezier, this.sliderData);
+				this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
 			} else if (this.triggerOnMouseMove) {
-				this.bezierSVG = this.callback(this.bezier, this.sliderData, [mx, my]);
+				this.bezierSVG = this.callback(this.bezier, this.sliderData, [mx, my], this.computeType);
 			}
 		},
 		getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),
@@ -94,18 +83,15 @@ export default defineComponent({
 	watch: {
 		sliderData: {
 			handler() {
-				this.bezierSVG = this.callback(this.bezier, this.sliderData);
+				this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
 			},
 			deep: true,
 		},
+		computeType: {
+			handler() {
+				this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
+			},
+		},
 	},
 });
 </script>
-
-<style scoped>
-.example-figure {
-	border: solid 1px black;
-	width: 200px;
-	height: 200px;
-}
-</style>

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

@@ -1,6 +1,15 @@
 <template>
-	<div>
+	<div class="example-pane-container">
 		<h3 class="example-pane-header">{{ name }}</h3>
+		<div v-if="chooseComputeType" class="compute-type-choice">
+			<strong>ComputeType:</strong>
+
+			<input type="radio" :id="`${id}-parametric`" value="Parametric" v-model="computeTypeChoice" />
+			<label :for="`${id}-parametric`">Parametric</label>
+
+			<input type="radio" :id="`${id}-euclidean`" value="Euclidean" v-model="computeTypeChoice" />
+			<label :for="`${id}-euclidean`">Euclidean</label>
+		</div>
 		<div class="example-row">
 			<div v-for="(example, index) in examples" :key="index">
 				<BezierExample
@@ -10,51 +19,46 @@
 					:callback="callback"
 					:sliderOptions="example.sliderOptions"
 					:triggerOnMouseMove="triggerOnMouseMove"
+					:computeType="computeTypeChoice"
 				/>
 			</div>
 		</div>
 	</div>
 </template>
 
+<style></style>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { BezierCallback, BezierCurveType, ExampleOptions, SliderOption } from "@/utils/types";
+import { BezierCallback, BezierCurveType, BEZIER_CURVE_TYPE, ComputeType, ExampleOptions, SliderOption } from "@/utils/types";
 
 import BezierExample from "@/components/BezierExample.vue";
 
 export default defineComponent({
 	props: {
-		name: String,
-		callback: {
-			type: Function as PropType<BezierCallback>,
-			required: true,
-		},
-		exampleOptions: {
-			type: Object as PropType<ExampleOptions>,
-			default: () => ({}),
-		},
-		triggerOnMouseMove: {
-			type: Boolean,
-			default: false,
-		},
+		name: { type: String as PropType<string>, required: true },
+		callback: { type: Function as PropType<BezierCallback>, required: true },
+		exampleOptions: { type: Object as PropType<ExampleOptions>, default: () => ({}) },
+		triggerOnMouseMove: { type: Boolean as PropType<boolean>, default: false },
+		chooseComputeType: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		const exampleDefaults = {
-			[BezierCurveType.Linear]: {
+			Linear: {
 				points: [
 					[30, 60],
 					[140, 120],
 				],
 			},
-			[BezierCurveType.Quadratic]: {
+			Quadratic: {
 				points: [
 					[30, 50],
 					[140, 30],
 					[160, 170],
 				],
 			},
-			[BezierCurveType.Cubic]: {
+			Cubic: {
 				points: [
 					[30, 30],
 					[60, 140],
@@ -65,10 +69,10 @@ export default defineComponent({
 		};
 
 		// Use quadratic slider options as a default if sliders are not provided for the other curve types.
-		const defaultSliderOptions: SliderOption[] = this.exampleOptions[BezierCurveType.Quadratic]?.sliderOptions || [];
+		const defaultSliderOptions: SliderOption[] = this.exampleOptions.Quadratic?.sliderOptions || [];
 
 		return {
-			examples: Object.values(BezierCurveType).map((curveType: BezierCurveType) => {
+			examples: BEZIER_CURVE_TYPE.map((curveType: BezierCurveType) => {
 				const givenData = this.exampleOptions[curveType];
 				const defaultData = exampleDefaults[curveType];
 				return {
@@ -78,6 +82,8 @@ export default defineComponent({
 					sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
 				};
 			}),
+			id: `${Math.random()}`.substring(2),
+			computeTypeChoice: "Parametric" as ComputeType,
 		};
 	},
 	components: {
@@ -85,15 +91,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style scoped>
-.example-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-}
-
-.example-pane-header {
-	margin-bottom: 0;
-}
-</style>

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

@@ -5,6 +5,8 @@
 	</div>
 </template>
 
+<style></style>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
@@ -16,20 +18,10 @@ const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "
 
 export default defineComponent({
 	props: {
-		title: String,
-		triples: {
-			type: Array as PropType<Array<Array<number[] | undefined>>>,
-			required: true,
-			mutable: true,
-		},
-		closed: {
-			type: Boolean as PropType<boolean>,
-			default: false,
-		},
-		callback: {
-			type: Function as PropType<SubpathCallback>,
-			required: true,
-		},
+		title: { type: String as PropType<string>, required: true },
+		triples: { type: Array as PropType<Array<Array<number[] | undefined>>>, mutable: true, required: true },
+		closed: { type: Boolean as PropType<boolean>, default: false },
+		callback: { type: Function as PropType<SubpathCallback>, required: true },
 	},
 	data() {
 		const subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
@@ -69,11 +61,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style scoped>
-.example-figure {
-	border: solid 1px black;
-	width: 200px;
-	height: 200px;
-}
-</style>

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

@@ -9,6 +9,8 @@
 	</div>
 </template>
 
+<style></style>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
@@ -18,11 +20,8 @@ import SubpathExample from "@/components/SubpathExample.vue";
 
 export default defineComponent({
 	props: {
-		name: String,
-		callback: {
-			type: Function as PropType<SubpathCallback>,
-			required: true,
-		},
+		name: { type: String as PropType<string>, required: true },
+		callback: { type: Function as PropType<SubpathCallback>, required: true },
 	},
 	data() {
 		return {
@@ -58,15 +57,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style scoped>
-.example-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-}
-
-.example-pane-header {
-	margin-bottom: 0;
-}
-</style>

website/other/bezier-rs-demos/src/utils/helpers.ts

@@ -1,27 +0,0 @@
-import { BezierCurveType, WasmBezierConstructorKey } from "@/utils/types";
-
-export function getCurveType(numPoints: number): BezierCurveType {
-	switch (numPoints) {
-		case 2:
-			return BezierCurveType.Linear;
-		case 3:
-			return BezierCurveType.Quadratic;
-		case 4:
-			return BezierCurveType.Cubic;
-		default:
-			throw new Error("Invalid number of points for a bezier");
-	}
-}
-
-export function getConstructorKey(bezierCurveType: BezierCurveType): WasmBezierConstructorKey {
-	switch (bezierCurveType) {
-		case BezierCurveType.Linear:
-			return "new_linear";
-		case BezierCurveType.Quadratic:
-			return "new_quadratic";
-		case BezierCurveType.Cubic:
-			return "new_cubic";
-		default:
-			throw new Error("Invalid value for a BezierCurveType");
-	}
-}

website/other/bezier-rs-demos/src/utils/types.ts

@@ -8,13 +8,12 @@ export type WasmBezierManipulatorKey = "set_start" | "set_handle_start" | "set_h
 export type WasmSubpathInstance = InstanceType<WasmRawInstance["WasmSubpath"]>;
 export type WasmSubpathManipulatorKey = "set_anchor" | "set_in_handle" | "set_out_handle";
 
-export enum BezierCurveType {
-	Linear = "Linear",
-	Quadratic = "Quadratic",
-	Cubic = "Cubic",
-}
+export const BEZIER_CURVE_TYPE = ["Linear", "Quadratic", "Cubic"] as const;
+export type BezierCurveType = typeof BEZIER_CURVE_TYPE[number];
 
-export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: [number, number]) => string;
+export type ComputeType = "Euclidean" | "Parametric";
+
+export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: [number, number], computeType?: ComputeType) => string;
 export type SubpathCallback = (subpath: WasmSubpathInstance) => string;
 
 export type ExampleOptions = {
@@ -33,3 +32,24 @@ export type SliderOption = {
 	variable: string;
 	unit?: string | string[];
 };
+
+export function getCurveType(numPoints: number): BezierCurveType {
+	const mapping: Record<number, BezierCurveType> = {
+		2: "Linear",
+		3: "Quadratic",
+		4: "Cubic",
+	};
+
+	if (!(numPoints in mapping)) throw new Error("Invalid number of points for a bezier");
+
+	return mapping[numPoints];
+}
+
+export function getConstructorKey(bezierCurveType: BezierCurveType): WasmBezierConstructorKey {
+	const mapping: Record<BezierCurveType, WasmBezierConstructorKey> = {
+		Linear: "new_linear",
+		Quadratic: "new_quadratic",
+		Cubic: "new_cubic",
+	};
+	return mapping[bezierCurveType];
+}

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

@@ -1,5 +1,5 @@
 use crate::svg_drawing::*;
-use bezier_rs::{ArcStrategy, ArcsOptions, Bezier, ProjectionOptions};
+use bezier_rs::{ArcStrategy, ArcsOptions, Bezier, ComputeType, ProjectionOptions};
 use glam::DVec2;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen::prelude::*;
@@ -132,10 +132,14 @@ impl WasmBezier {
 		wrap_svg_tag(format!("{bezier}{}", draw_text(format!("Length: {:.2}", self.0.length(None)), TEXT_OFFSET_X, TEXT_OFFSET_Y, BLACK)))
 	}
 
-	pub fn evaluate(&self, t: f64) -> String {
+	pub fn evaluate(&self, t: f64, compute_type: String) -> String {
 		let bezier = self.get_bezier_path();
-		let point = &self.0.evaluate(t);
-		let content = format!("{bezier}{}", draw_circle(*point, 4., RED, 1.5, WHITE));
+		let point = match compute_type.as_str() {
+			"Euclidean" => self.0.evaluate(ComputeType::Euclidean(t)),
+			"Parametric" => self.0.evaluate(ComputeType::Parametric(t)),
+			_ => panic!("Unexpected ComputeType string: '{}'", compute_type),
+		};
+		let content = format!("{bezier}{}", draw_circle(point, 4., RED, 1.5, WHITE));
 		wrap_svg_tag(content)
 	}
 
@@ -173,7 +177,7 @@ impl WasmBezier {
 		let bezier = self.get_bezier_path();
 
 		let tangent_point = self.0.tangent(t);
-		let intersection_point = self.0.evaluate(t);
+		let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
 		let tangent_end = intersection_point + tangent_point * SCALE_UNIT_VECTOR_FACTOR;
 
 		let content = format!(
@@ -189,7 +193,7 @@ impl WasmBezier {
 		let bezier = self.get_bezier_path();
 
 		let normal_point = self.0.normal(t);
-		let intersection_point = self.0.evaluate(t);
+		let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
 		let normal_end = intersection_point + normal_point * SCALE_UNIT_VECTOR_FACTOR;
 
 		let content = format!(
@@ -205,7 +209,7 @@ impl WasmBezier {
 		let bezier = self.get_bezier_path();
 		let radius = 1. / self.0.curvature(t);
 		let normal_point = self.0.normal(t);
-		let intersection_point = self.0.evaluate(t);
+		let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
 
 		let curvature_center = intersection_point + normal_point * radius;
 
@@ -269,7 +273,7 @@ impl WasmBezier {
 
 	pub fn project(&self, x: f64, y: f64) -> String {
 		let projected_t_value = self.0.project(DVec2::new(x, y), ProjectionOptions::default());
-		let projected_point = self.0.evaluate(projected_t_value);
+		let projected_point = self.0.evaluate(ComputeType::Parametric(projected_t_value));
 
 		let bezier = self.get_bezier_path();
 		let content = format!("{bezier}{}", draw_line(projected_point.x, projected_point.y, x, y, RED, 1.),);
@@ -285,7 +289,7 @@ impl WasmBezier {
 			.zip([RED, GREEN])
 			.flat_map(|(t_value_list, color)| {
 				t_value_list.iter().map(|&t_value| {
-					let point = self.0.evaluate(t_value);
+					let point = self.0.evaluate(ComputeType::Parametric(t_value));
 					draw_circle(point, 3., color, 1.5, WHITE)
 				})
 			})
@@ -320,7 +324,7 @@ impl WasmBezier {
 		let circles: String = inflections
 			.iter()
 			.map(|&t_value| {
-				let point = self.0.evaluate(t_value);
+				let point = self.0.evaluate(ComputeType::Parametric(t_value));
 				draw_circle(point, 3., RED, 1.5, WHITE)
 			})
 			.fold("".to_string(), |acc, circle| acc + &circle);
@@ -413,7 +417,7 @@ impl WasmBezier {
 			.intersect(&line, None)
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(*intersection_t);
+				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -433,7 +437,7 @@ impl WasmBezier {
 			.intersect(&quadratic, Some(error))
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(*intersection_t);
+				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -453,7 +457,7 @@ impl WasmBezier {
 			.intersect(&cubic, Some(error))
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(*intersection_t);
+				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -469,7 +473,7 @@ impl WasmBezier {
 			.self_intersections(Some(error))
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(intersection_t[0]);
+				let point = &self.0.evaluate(ComputeType::Parametric(intersection_t[0]));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(bezier_curve_svg, |acc, item| format!("{acc}{item}"));