Bezier-rs: Updated Bezier function signatures to accept TValue (#967)

* Create helper for converting d to t values

* Add euclidean option for tangent and normal

* Modified bezier functions signatures to accept ComputeType

* Stylistic changes per review

* Added ComputeType documentation

* Renamed ComputeType to TValue

* Fixed comments

* Fixed failing unit tests

* Code review

* Fix comments in code review

* Renamed compute_type_to_parametric to t_value_to_parametric

---------

Co-authored-by: Linda Zheng <thelindazheng@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>

website/other/bezier-rs-demos/src/components/BezierDemo.ts

@@ -1,7 +1,7 @@
 import { WasmBezier } from "@/../wasm/pkg";
 import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
 import { renderDemo } from "@/utils/render";
-import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, SliderOption, WasmBezierManipulatorKey, ComputeType, Demo } from "@/utils/types";
+import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, SliderOption, WasmBezierManipulatorKey, TVariant, Demo } from "@/utils/types";
 
 const SELECTABLE_RANGE = 10;
 
@@ -24,7 +24,7 @@ class BezierDemo extends HTMLElement implements Demo {
 
 	triggerOnMouseMove!: boolean;
 
-	computeType!: ComputeType;
+	tVariant!: TVariant;
 
 	// Data
 	bezier!: WasmBezier;
@@ -40,12 +40,12 @@ class BezierDemo extends HTMLElement implements Demo {
 	sliderUnits!: Record<string, string | string[]>;
 
 	static get observedAttributes(): string[] {
-		return ["computetype"];
+		return ["tvariant"];
 	}
 
 	attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
-		if (name === "computetype" && oldValue) {
-			this.computeType = (newValue || "Parametric") as ComputeType;
+		if (name === "tvariant" && oldValue) {
+			this.tVariant = (newValue || "Parametric") as TVariant;
 			const figure = this.querySelector("figure") as HTMLElement;
 			this.drawDemo(figure);
 		}
@@ -57,7 +57,7 @@ class BezierDemo extends HTMLElement implements Demo {
 		this.key = this.getAttribute("key") as BezierFeatureKey;
 		this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
 		this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
-		this.computeType = (this.getAttribute("computetype") || "Parametric") as ComputeType;
+		this.tVariant = (this.getAttribute("tvariant") || "Parametric") as TVariant;
 
 		this.callback = bezierFeatures[this.key].callback as BezierCallback;
 		const curveType = getCurveType(this.points.length);
@@ -78,7 +78,7 @@ class BezierDemo extends HTMLElement implements Demo {
 	}
 
 	drawDemo(figure: HTMLElement, mouseLocation?: [number, number]): void {
-		figure.innerHTML = this.callback(this.bezier, this.sliderData, mouseLocation, this.computeType);
+		figure.innerHTML = this.callback(this.bezier, this.sliderData, mouseLocation, this.tVariant);
 	}
 
 	onMouseDown(event: MouseEvent): void {

website/other/bezier-rs-demos/src/components/BezierDemoPane.ts

@@ -1,6 +1,6 @@
 import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
 import { renderDemoPane } from "@/utils/render";
-import { BezierCurveType, BEZIER_CURVE_TYPE, ComputeType, BezierDemoOptions, SliderOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
+import { BezierCurveType, BEZIER_CURVE_TYPE, TVariant, BezierDemoOptions, SliderOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
 
 const demoDefaults = {
 	Linear: {
@@ -36,24 +36,23 @@ class BezierDemoPane extends HTMLElement implements DemoPane {
 
 	triggerOnMouseMove!: boolean;
 
-	chooseComputeType!: boolean;
+	chooseTVariant!: boolean;
 
 	// Data
 	demos!: BezierDemoArgs[];
 
 	id!: string;
 
-	computeType!: ComputeType;
+	tVariant!: TVariant;
 
 	connectedCallback(): void {
-		this.computeType = "Parametric";
-
+		this.tVariant = "Parametric";
 		this.key = (this.getAttribute("name") || "") as BezierFeatureKey;
 		this.id = `bezier/${this.key}`;
 		this.name = bezierFeatures[this.key].name;
 		this.demoOptions = JSON.parse(this.getAttribute("demoOptions") || "[]");
 		this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
-		this.chooseComputeType = this.getAttribute("chooseComputeType") === "true";
+		this.chooseTVariant = this.getAttribute("chooseTVariant") === "true";
 		// Use quadratic slider options as a default if sliders are not provided for the other curve types.
 		const defaultSliderOptions: SliderOption[] = this.demoOptions.Quadratic?.sliderOptions || [];
 		this.demos = BEZIER_CURVE_TYPE.map((curveType: BezierCurveType) => {
@@ -80,7 +79,7 @@ class BezierDemoPane extends HTMLElement implements DemoPane {
 		bezierDemo.setAttribute("key", this.key);
 		bezierDemo.setAttribute("sliderOptions", JSON.stringify(demo.sliderOptions));
 		bezierDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
-		bezierDemo.setAttribute("computetype", this.computeType);
+		bezierDemo.setAttribute("tvariant", this.tVariant);
 		return bezierDemo;
 	}
 }

website/other/bezier-rs-demos/src/components/SubpathDemo.ts

@@ -2,7 +2,7 @@ import { WasmSubpath } from "@/../wasm/pkg";
 import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
 import { renderDemo } from "@/utils/render";
 
-import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, SliderOption, ComputeType } from "@/utils/types";
+import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, SliderOption, TVariant } from "@/utils/types";
 
 const SELECTABLE_RANGE = 10;
 const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "set_in_handle", "set_out_handle"];
@@ -21,7 +21,7 @@ class SubpathDemo extends HTMLElement {
 
 	triggerOnMouseMove!: boolean;
 
-	computeType!: ComputeType;
+	tVariant!: TVariant;
 
 	// Data
 	subpath!: WasmSubpath;
@@ -37,12 +37,12 @@ class SubpathDemo extends HTMLElement {
 	sliderUnits!: Record<string, string | string[]>;
 
 	static get observedAttributes(): string[] {
-		return ["computetype"];
+		return ["tvariant"];
 	}
 
 	attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
-		if (name === "computetype" && oldValue) {
-			this.computeType = (newValue || "Parametric") as ComputeType;
+		if (name === "tvariant" && oldValue) {
+			this.tVariant = (newValue || "Parametric") as TVariant;
 			const figure = this.querySelector("figure") as HTMLElement;
 			this.drawDemo(figure);
 		}
@@ -55,7 +55,7 @@ class SubpathDemo extends HTMLElement {
 		this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
 		this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
 		this.closed = this.getAttribute("closed") === "true";
-		this.computeType = (this.getAttribute("computetype") || "Parametric") as ComputeType;
+		this.tVariant = (this.getAttribute("tvariant") || "Parametric") as TVariant;
 
 		this.callback = subpathFeatures[this.key].callback as SubpathCallback;
 		this.subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
@@ -73,7 +73,7 @@ class SubpathDemo extends HTMLElement {
 	}
 
 	drawDemo(figure: HTMLElement, mouseLocation?: [number, number]): void {
-		figure.innerHTML = this.callback(this.subpath, this.sliderData, mouseLocation, this.computeType);
+		figure.innerHTML = this.callback(this.subpath, this.sliderData, mouseLocation, this.tVariant);
 	}
 
 	onMouseDown(event: MouseEvent): void {

website/other/bezier-rs-demos/src/components/SubpathDemoPane.ts

@@ -1,6 +1,6 @@
 import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
 import { renderDemoPane } from "@/utils/render";
-import { ComputeType, Demo, DemoPane, SliderOption, SubpathDemoArgs } from "@/utils/types";
+import { TVariant, Demo, DemoPane, SliderOption, SubpathDemoArgs } from "@/utils/types";
 
 class SubpathDemoPane extends HTMLElement implements DemoPane {
 	// Props
@@ -12,14 +12,14 @@ class SubpathDemoPane extends HTMLElement implements DemoPane {
 
 	triggerOnMouseMove!: boolean;
 
-	chooseComputeType!: boolean;
+	chooseTVariant!: boolean;
 
 	// Data
 	demos!: SubpathDemoArgs[];
 
 	id!: string;
 
-	computeType!: ComputeType;
+	tVariant!: TVariant;
 
 	connectedCallback(): void {
 		this.demos = [
@@ -47,14 +47,13 @@ class SubpathDemoPane extends HTMLElement implements DemoPane {
 				closed: true,
 			},
 		];
-		this.computeType = "Parametric";
-
+		this.tVariant = "Parametric";
 		this.key = (this.getAttribute("name") || "") as SubpathFeatureKey;
 		this.id = `subpath/${this.key}`;
 		this.name = subpathFeatures[this.key].name;
 		this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
 		this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
-		this.chooseComputeType = this.getAttribute("chooseComputeType") === "true";
+		this.chooseTVariant = this.getAttribute("chooseTVariant") === "true";
 
 		this.render();
 	}
@@ -71,7 +70,7 @@ class SubpathDemoPane extends HTMLElement implements DemoPane {
 		subpathDemo.setAttribute("key", this.key);
 		subpathDemo.setAttribute("sliderOptions", JSON.stringify(this.sliderOptions));
 		subpathDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
-		subpathDemo.setAttribute("computetype", this.computeType);
+		subpathDemo.setAttribute("tvariant", this.tVariant);
 		return subpathDemo;
 	}
 }

website/other/bezier-rs-demos/src/features/bezier-features.ts

@@ -1,6 +1,6 @@
 import { WasmBezier } from "@/../wasm/pkg";
-import { tSliderOptions, tErrorOptions, tMinimumSeperationOptions } from "@/utils/options";
-import { ComputeType, BezierDemoOptions, WasmBezierInstance, BezierCallback } from "@/utils/types";
+import { tSliderOptions, errorOptions, minimumSeparationOptions } from "@/utils/options";
+import { TVariant, BezierDemoOptions, WasmBezierInstance, BezierCallback } from "@/utils/types";
 
 const bezierFeatures = {
 	constructor: {
@@ -67,13 +67,13 @@ const bezierFeatures = {
 	},
 	evaluate: {
 		name: "Evaluate",
-		callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => bezier.evaluate(options.computeArgument, computeType),
+		callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => bezier.evaluate(options.t, tVariant),
 		demoOptions: {
 			Quadratic: {
-				sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
+				sliderOptions: [tSliderOptions],
 			},
 		},
-		chooseComputeType: true,
+		chooseTVariant: true,
 	},
 	"lookup-table": {
 		name: "Lookup Table",
@@ -118,25 +118,27 @@ const bezierFeatures = {
 	},
 	tangent: {
 		name: "Tangent",
-		callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.tangent(options.t),
+		callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => bezier.tangent(options.t, tVariant),
 		demoOptions: {
 			Quadratic: {
 				sliderOptions: [tSliderOptions],
 			},
 		},
+		chooseTVariant: true,
 	},
 	normal: {
 		name: "Normal",
-		callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.normal(options.t),
+		callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => bezier.normal(options.t, tVariant),
 		demoOptions: {
 			Quadratic: {
 				sliderOptions: [tSliderOptions],
 			},
 		},
+		chooseTVariant: true,
 	},
 	curvature: {
 		name: "Curvature",
-		callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.curvature(options.t),
+		callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => bezier.curvature(options.t, tVariant),
 		demoOptions: {
 			Linear: {
 				disabled: true,
@@ -145,19 +147,21 @@ const bezierFeatures = {
 				sliderOptions: [tSliderOptions],
 			},
 		},
+		chooseTVariant: true,
 	},
 	split: {
 		name: "Split",
-		callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.split(options.t),
+		callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => bezier.split(options.t, tVariant),
 		demoOptions: {
 			Quadratic: {
 				sliderOptions: [tSliderOptions],
 			},
 		},
+		chooseTVariant: true,
 	},
 	trim: {
 		name: "Trim",
-		callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.trim(options.t1, options.t2),
+		callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => bezier.trim(options.t1, options.t2, tVariant),
 		demoOptions: {
 			Quadratic: {
 				sliderOptions: [
@@ -178,6 +182,7 @@ const bezierFeatures = {
 				],
 			},
 		},
+		chooseTVariant: true,
 	},
 	project: {
 		name: "Project",
@@ -400,11 +405,11 @@ const bezierFeatures = {
 				[180, 10],
 				[90, 120],
 			];
-			return bezier.intersect_quadratic_segment(quadratic, options.error, options.minimum_seperation);
+			return bezier.intersect_quadratic_segment(quadratic, options.error, options.minimum_separation);
 		},
 		demoOptions: {
 			Quadratic: {
-				sliderOptions: [tErrorOptions, tMinimumSeperationOptions],
+				sliderOptions: [errorOptions, minimumSeparationOptions],
 			},
 		},
 	},
@@ -417,11 +422,11 @@ const bezierFeatures = {
 				[40, 120],
 				[175, 140],
 			];
-			return bezier.intersect_cubic_segment(cubic, options.error, options.minimum_seperation);
+			return bezier.intersect_cubic_segment(cubic, options.error, options.minimum_separation);
 		},
 		demoOptions: {
 			Quadratic: {
-				sliderOptions: [tErrorOptions, tMinimumSeperationOptions],
+				sliderOptions: [errorOptions, minimumSeparationOptions],
 			},
 		},
 	},
@@ -430,7 +435,7 @@ const bezierFeatures = {
 		callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.intersect_self(options.error),
 		demoOptions: {
 			Quadratic: {
-				sliderOptions: [tErrorOptions],
+				sliderOptions: [errorOptions],
 			},
 			Cubic: {
 				customPoints: [
@@ -470,12 +475,13 @@ const bezierFeatures = {
 	},
 	"de-casteljau-points": {
 		name: "De Casteljau Points",
-		callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.de_casteljau_points(options.t),
+		callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => bezier.de_casteljau_points(options.t, tVariant),
 		demoOptions: {
 			Quadratic: {
 				sliderOptions: [tSliderOptions],
 			},
 		},
+		chooseTVariant: true,
 	},
 };
 
@@ -485,6 +491,6 @@ export type BezierFeatureOptions = {
 	callback: BezierCallback;
 	demoOptions?: Partial<BezierDemoOptions>;
 	triggerOnMouseMove?: boolean;
-	chooseComputeType?: boolean;
+	chooseTVariant?: boolean;
 };
 export default bezierFeatures as Record<BezierFeatureKey, BezierFeatureOptions>;

website/other/bezier-rs-demos/src/features/subpath-features.ts

@@ -1,5 +1,5 @@
 import { tSliderOptions } from "@/utils/options";
-import { ComputeType, SliderOption, SubpathCallback, WasmSubpathInstance } from "@/utils/types";
+import { TVariant, SliderOption, SubpathCallback, WasmSubpathInstance } from "@/utils/types";
 
 const subpathFeatures = {
 	constructor: {
@@ -8,10 +8,10 @@ const subpathFeatures = {
 	},
 	insert: {
 		name: "Insert",
-		callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => subpath.insert(options.computeArgument, computeType),
-		sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
+		callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => subpath.insert(options.t, tVariant),
+		sliderOptions: [tSliderOptions],
 		// TODO: Uncomment this after implementing the Euclidean version
-		// chooseComputeType: true,
+		// chooseTVariant: true,
 	},
 	length: {
 		name: "Length",
@@ -19,9 +19,9 @@ const subpathFeatures = {
 	},
 	evaluate: {
 		name: "Evaluate",
-		callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => subpath.evaluate(options.computeArgument, computeType),
-		sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
-		chooseComputeType: true,
+		callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => subpath.evaluate(options.t, tVariant),
+		sliderOptions: [tSliderOptions],
+		chooseTVariant: true,
 	},
 	project: {
 		name: "Project",
@@ -68,10 +68,10 @@ const subpathFeatures = {
 	},
 	split: {
 		name: "Split",
-		callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => subpath.split(options.computeArgument, computeType),
-		sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
+		callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, tVariant: TVariant): string => subpath.split(options.t, tVariant),
+		sliderOptions: [tSliderOptions],
 		// TODO: Uncomment this after implementing the Euclidean version
-		// chooseComputeType: true,
+		// chooseTVariant: true,
 	},
 };
 
@@ -81,6 +81,6 @@ export type SubpathFeatureOptions = {
 	callback: SubpathCallback;
 	sliderOptions?: SliderOption[];
 	triggerOnMouseMove?: boolean;
-	chooseComputeType?: boolean;
+	chooseTVariant?: boolean;
 };
 export default subpathFeatures as Record<SubpathFeatureKey, SubpathFeatureOptions>;

website/other/bezier-rs-demos/src/main.ts

@@ -31,7 +31,7 @@ function renderBezierPane(featureName: BezierFeatureKey, container: HTMLElement
 	demo.setAttribute("name", featureName);
 	demo.setAttribute("demoOptions", JSON.stringify(feature.demoOptions || {}));
 	demo.setAttribute("triggerOnMouseMove", String(feature.triggerOnMouseMove));
-	demo.setAttribute("chooseComputeType", String(feature.chooseComputeType));
+	demo.setAttribute("chooseTVariant", String(feature.chooseTVariant));
 	container?.append(demo);
 }
 
@@ -42,7 +42,7 @@ function renderSubpathPane(featureName: SubpathFeatureKey, container: HTMLElemen
 	demo.setAttribute("name", featureName);
 	demo.setAttribute("sliderOptions", JSON.stringify(feature.sliderOptions || []));
 	demo.setAttribute("triggerOnMouseMove", String(feature.triggerOnMouseMove));
-	demo.setAttribute("chooseComputeType", String(feature.chooseComputeType));
+	demo.setAttribute("chooseTVariant", String(feature.chooseTVariant));
 	container?.append(demo);
 }
 

website/other/bezier-rs-demos/src/style.css

@@ -30,7 +30,7 @@ body > h2 {
 	justify-content: center;
 }
 
-.compute-type-choice {
+.t-variant-choice {
 	margin-top: 20px;
 }
 

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

@@ -6,7 +6,7 @@ export const tSliderOptions = {
 	variable: "t",
 };
 
-export const tErrorOptions = {
+export const errorOptions = {
 	variable: "error",
 	min: 0.1,
 	max: 2,
@@ -14,7 +14,7 @@ export const tErrorOptions = {
 	default: 0.5,
 };
 
-export const tMinimumSeperationOptions = {
+export const minimumSeparationOptions = {
 	variable: "minimum_seperation",
 	min: 0.001,
 	max: 0.25,

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

@@ -1,4 +1,4 @@
-import { ComputeType, Demo, DemoPane, SliderOption } from "@/utils/types";
+import { TVariant, Demo, DemoPane, SliderOption } from "@/utils/types";
 
 export function renderDemo(demo: Demo): void {
 	const header = document.createElement("h4");
@@ -53,27 +53,27 @@ export function renderDemoPane(demoPane: DemoPane): void {
 	header.className = "demo-pane-header";
 	header.append(headerAnchorLink);
 
-	const computeTypeContainer = document.createElement("div");
-	computeTypeContainer.className = "compute-type-choice";
+	const tVariantContainer = document.createElement("div");
+	tVariantContainer.className = "t-variant-choice";
 
-	const computeTypeLabel = document.createElement("strong");
-	computeTypeLabel.innerText = "ComputeType:";
-	computeTypeContainer.append(computeTypeLabel);
+	const tVariantLabel = document.createElement("strong");
+	tVariantLabel.innerText = "TValue Variant:";
+	tVariantContainer.append(tVariantLabel);
 
-	const radioInputs = ["Parametric", "Euclidean"].map((computeType) => {
-		const id = `${demoPane.id}-${computeType}`;
+	const radioInputs = ["Parametric", "Euclidean"].map((tVariant) => {
+		const id = `${demoPane.id}-${tVariant}`;
 		const radioInput = document.createElement("input");
 		radioInput.type = "radio";
 		radioInput.id = id;
-		radioInput.value = computeType;
-		radioInput.name = "ComputeType";
-		radioInput.checked = computeType === "Parametric";
-		computeTypeContainer.append(radioInput);
+		radioInput.value = tVariant;
+		radioInput.name = `TVariant - ${demoPane.id}`;
+		radioInput.checked = tVariant === "Parametric";
+		tVariantContainer.append(radioInput);
 
 		const label = document.createElement("label");
 		label.htmlFor = id;
-		label.innerText = computeType;
-		computeTypeContainer.append(label);
+		label.innerText = tVariant;
+		tVariantContainer.append(label);
 		return radioInput;
 	});
 
@@ -88,16 +88,16 @@ export function renderDemoPane(demoPane: DemoPane): void {
 
 		radioInputs.forEach((radioInput: HTMLElement) => {
 			radioInput.addEventListener("input", (event: Event): void => {
-				demoPane.computeType = (event.target as HTMLInputElement).value as ComputeType;
-				demoComponent.setAttribute("computetype", demoPane.computeType);
+				demoPane.tVariant = (event.target as HTMLInputElement).value as TVariant;
+				demoComponent.setAttribute("tvariant", demoPane.tVariant);
 			});
 		});
 		demoRow.append(demoComponent);
 	});
 
 	container.append(header);
-	if (demoPane.chooseComputeType) {
-		container.append(computeTypeContainer);
+	if (demoPane.chooseTVariant) {
+		container.append(tVariantContainer);
 	}
 	container.append(demoRow);
 

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

@@ -11,10 +11,10 @@ export type WasmSubpathManipulatorKey = "set_anchor" | "set_in_handle" | "set_ou
 export const BEZIER_CURVE_TYPE = ["Linear", "Quadratic", "Cubic"] as const;
 export type BezierCurveType = typeof BEZIER_CURVE_TYPE[number];
 
-export type ComputeType = "Euclidean" | "Parametric";
+export type TVariant = "Euclidean" | "Parametric";
 
-export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: [number, number], computeType?: ComputeType) => string;
-export type SubpathCallback = (subpath: WasmSubpathInstance, options: Record<string, number>, mouseLocation?: [number, number], computeType?: ComputeType) => string;
+export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: [number, number], tVariant?: TVariant) => string;
+export type SubpathCallback = (subpath: WasmSubpathInstance, options: Record<string, number>, mouseLocation?: [number, number], tVariant?: TVariant) => string;
 
 export type BezierDemoOptions = {
 	[key in BezierCurveType]: {
@@ -85,7 +85,7 @@ export interface DemoPane extends HTMLElement {
 	name: string;
 	demos: DemoArgs[];
 	id: string;
-	chooseComputeType: boolean;
-	computeType: ComputeType;
+	chooseTVariant: boolean;
+	tVariant: TVariant;
 	buildDemo(demo: DemoArgs): Demo;
 }

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

@@ -1,5 +1,5 @@
 use crate::svg_drawing::*;
-use bezier_rs::{ArcStrategy, ArcsOptions, Bezier, ComputeType, ProjectionOptions};
+use bezier_rs::{ArcStrategy, ArcsOptions, Bezier, ProjectionOptions, TValue};
 use glam::DVec2;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen::prelude::*;
@@ -41,6 +41,14 @@ fn convert_wasm_maximize_arcs(wasm_enum_value: WasmMaximizeArcs) -> ArcStrategy
 	}
 }
 
+fn parse_t_variant(t_variant: &String, t: f64) -> TValue {
+	match t_variant.as_str() {
+		"Parametric" => TValue::Parametric(t),
+		"Euclidean" => TValue::Euclidean(t),
+		_ => panic!("Unexpected TValue string: '{}'", t_variant),
+	}
+}
+
 #[wasm_bindgen]
 impl WasmBezier {
 	/// Expect js_points to be a list of 2 pairs.
@@ -128,13 +136,10 @@ 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, compute_type: String) -> String {
+	pub fn evaluate(&self, raw_t: f64, t_variant: String) -> String {
 		let bezier = self.get_bezier_path();
-		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 t = parse_t_variant(&t_variant, raw_t);
+		let point = self.0.evaluate(t);
 		let content = format!("{bezier}{}", draw_circle(point, 4., RED, 1.5, WHITE));
 		wrap_svg_tag(content)
 	}
@@ -169,11 +174,12 @@ impl WasmBezier {
 		wrap_svg_tag(content)
 	}
 
-	pub fn tangent(&self, t: f64) -> String {
+	pub fn tangent(&self, raw_t: f64, t_variant: String) -> String {
 		let bezier = self.get_bezier_path();
+		let t = parse_t_variant(&t_variant, raw_t);
 
 		let tangent_point = self.0.tangent(t);
-		let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
+		let intersection_point = self.0.evaluate(t);
 		let tangent_end = intersection_point + tangent_point * SCALE_UNIT_VECTOR_FACTOR;
 
 		let content = format!(
@@ -185,11 +191,12 @@ impl WasmBezier {
 		wrap_svg_tag(content)
 	}
 
-	pub fn normal(&self, t: f64) -> String {
+	pub fn normal(&self, raw_t: f64, t_variant: String) -> String {
 		let bezier = self.get_bezier_path();
+		let t = parse_t_variant(&t_variant, raw_t);
 
 		let normal_point = self.0.normal(t);
-		let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
+		let intersection_point = self.0.evaluate(t);
 		let normal_end = intersection_point + normal_point * SCALE_UNIT_VECTOR_FACTOR;
 
 		let content = format!(
@@ -201,11 +208,13 @@ impl WasmBezier {
 		wrap_svg_tag(content)
 	}
 
-	pub fn curvature(&self, t: f64) -> String {
+	pub fn curvature(&self, raw_t: f64, t_variant: String) -> String {
 		let bezier = self.get_bezier_path();
+		let t = parse_t_variant(&t_variant, raw_t);
+
 		let radius = 1. / self.0.curvature(t);
 		let normal_point = self.0.normal(t);
-		let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
+		let intersection_point = self.0.evaluate(t);
 
 		let curvature_center = intersection_point + normal_point * radius;
 
@@ -219,7 +228,8 @@ impl WasmBezier {
 		wrap_svg_tag(content)
 	}
 
-	pub fn split(&self, t: f64) -> String {
+	pub fn split(&self, raw_t: f64, t_variant: String) -> String {
+		let t = parse_t_variant(&t_variant, raw_t);
 		let beziers: [Bezier; 2] = self.0.split(t);
 
 		let mut original_bezier_svg = String::new();
@@ -252,7 +262,8 @@ impl WasmBezier {
 		wrap_svg_tag(format!("{original_bezier_svg}{bezier_svg_1}{bezier_svg_2}"))
 	}
 
-	pub fn trim(&self, t1: f64, t2: f64) -> String {
+	pub fn trim(&self, raw_t1: f64, raw_t2: f64, t_variant: String) -> String {
+		let (t1, t2) = (parse_t_variant(&t_variant, raw_t1), parse_t_variant(&t_variant, raw_t2));
 		let trimmed_bezier = self.0.trim(t1, t2);
 
 		let mut trimmed_bezier_svg = String::new();
@@ -269,7 +280,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(ComputeType::Parametric(projected_t_value));
+		let projected_point = self.0.evaluate(TValue::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 +296,7 @@ impl WasmBezier {
 			.zip([RED, GREEN])
 			.flat_map(|(t_value_list, color)| {
 				t_value_list.iter().map(|&t_value| {
-					let point = self.0.evaluate(ComputeType::Parametric(t_value));
+					let point = self.0.evaluate(TValue::Parametric(t_value));
 					draw_circle(point, 3., color, 1.5, WHITE)
 				})
 			})
@@ -320,7 +331,7 @@ impl WasmBezier {
 		let circles: String = inflections
 			.iter()
 			.map(|&t_value| {
-				let point = self.0.evaluate(ComputeType::Parametric(t_value));
+				let point = self.0.evaluate(TValue::Parametric(t_value));
 				draw_circle(point, 3., RED, 1.5, WHITE)
 			})
 			.fold("".to_string(), |acc, circle| acc + &circle);
@@ -328,7 +339,8 @@ impl WasmBezier {
 		wrap_svg_tag(content)
 	}
 
-	pub fn de_casteljau_points(&self, t: f64) -> String {
+	pub fn de_casteljau_points(&self, raw_t: f64, t_variant: String) -> String {
+		let t = parse_t_variant(&t_variant, raw_t);
 		let points: Vec<Vec<DVec2>> = self.0.de_casteljau_points(t);
 
 		let bezier_svg = self.get_bezier_path();
@@ -413,7 +425,7 @@ impl WasmBezier {
 			.intersect(&line, None, None)
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				let point = &self.0.evaluate(TValue::Parametric(*intersection_t));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -433,7 +445,7 @@ impl WasmBezier {
 			.intersect(&quadratic, Some(error), Some(minimum_separation))
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				let point = &self.0.evaluate(TValue::Parametric(*intersection_t));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -453,7 +465,7 @@ impl WasmBezier {
 			.intersect(&cubic, Some(error), Some(minimum_separation))
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				let point = &self.0.evaluate(TValue::Parametric(*intersection_t));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -469,7 +481,7 @@ impl WasmBezier {
 			.self_intersections(Some(error))
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(ComputeType::Parametric(intersection_t[0]));
+				let point = &self.0.evaluate(TValue::Parametric(intersection_t[0]));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(bezier_curve_svg, |acc, item| format!("{acc}{item}"));
@@ -497,7 +509,7 @@ impl WasmBezier {
 			.rectangle_intersections(points[0], points[1])
 			.iter()
 			.map(|intersection_t| {
-				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				let point = &self.0.evaluate(TValue::Parametric(*intersection_t));
 				draw_circle(*point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));

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

@@ -1,6 +1,6 @@
 use crate::svg_drawing::*;
 
-use bezier_rs::{Bezier, ComputeType, ManipulatorGroup, ProjectionOptions, Subpath};
+use bezier_rs::{Bezier, ManipulatorGroup, ProjectionOptions, Subpath, TValue};
 
 use glam::DVec2;
 use std::fmt::Write;
@@ -56,20 +56,20 @@ impl WasmSubpath {
 		subpath_svg
 	}
 
-	pub fn insert(&self, t: f64, compute_type: String) -> String {
+	pub fn insert(&self, t: f64, t_variant: String) -> String {
 		let mut subpath = self.0.clone();
-		let point = match compute_type.as_str() {
+		let point = match t_variant.as_str() {
 			"Euclidean" => {
-				let parameter = ComputeType::Euclidean(t);
+				let parameter = TValue::Euclidean(t);
 				subpath.insert(parameter);
 				self.0.evaluate(parameter)
 			}
 			"Parametric" => {
-				let parameter = ComputeType::Parametric(t);
+				let parameter = TValue::Parametric(t);
 				subpath.insert(parameter);
 				self.0.evaluate(parameter)
 			}
-			_ => panic!("Unexpected ComputeType string: '{}'", compute_type),
+			_ => panic!("Unexpected TValue string: '{}'", t_variant),
 		};
 		let point_text = draw_circle(point, 4., RED, 1.5, WHITE);
 
@@ -81,19 +81,19 @@ impl WasmSubpath {
 		wrap_svg_tag(format!("{}{}", self.to_default_svg(), length_text))
 	}
 
-	pub fn evaluate(&self, t: f64, compute_type: String) -> String {
-		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),
+	pub fn evaluate(&self, t: f64, t_variant: String) -> String {
+		let point = match t_variant.as_str() {
+			"Euclidean" => self.0.evaluate(TValue::Euclidean(t)),
+			"Parametric" => self.0.evaluate(TValue::Parametric(t)),
+			_ => panic!("Unexpected TValue string: '{}'", t_variant),
 		};
 		let point_text = draw_circle(point, 4., RED, 1.5, WHITE);
 		wrap_svg_tag(format!("{}{}", self.to_default_svg(), point_text))
 	}
 
 	pub fn tangent(&self, t: f64) -> String {
-		let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
-		let tangent_point = self.0.tangent(ComputeType::Parametric(t));
+		let intersection_point = self.0.evaluate(TValue::Parametric(t));
+		let tangent_point = self.0.tangent(TValue::Parametric(t));
 		let tangent_end = intersection_point + tangent_point * SCALE_UNIT_VECTOR_FACTOR;
 
 		let point_text = draw_circle(intersection_point, 4., RED, 1.5, WHITE);
@@ -103,8 +103,8 @@ impl WasmSubpath {
 	}
 
 	pub fn normal(&self, t: f64) -> String {
-		let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
-		let normal_point = self.0.normal(ComputeType::Parametric(t));
+		let intersection_point = self.0.evaluate(TValue::Parametric(t));
+		let normal_point = self.0.normal(TValue::Parametric(t));
 		let normal_end = intersection_point + normal_point * SCALE_UNIT_VECTOR_FACTOR;
 
 		let point_text = draw_circle(intersection_point, 4., RED, 1.5, WHITE);
@@ -115,7 +115,7 @@ impl WasmSubpath {
 
 	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 projected_point = self.0.evaluate(TValue::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.),);
@@ -143,7 +143,7 @@ impl WasmSubpath {
 			.intersections(&line, None, None)
 			.iter()
 			.map(|intersection_t| {
-				let point = self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				let point = self.0.evaluate(TValue::Parametric(*intersection_t));
 				draw_circle(point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -172,7 +172,7 @@ impl WasmSubpath {
 			.intersections(&line, None, None)
 			.iter()
 			.map(|intersection_t| {
-				let point = self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				let point = self.0.evaluate(TValue::Parametric(*intersection_t));
 				draw_circle(point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -201,7 +201,7 @@ impl WasmSubpath {
 			.intersections(&line, None, None)
 			.iter()
 			.map(|intersection_t| {
-				let point = self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				let point = self.0.evaluate(TValue::Parametric(*intersection_t));
 				draw_circle(point, 4., RED, 1.5, WHITE)
 			})
 			.fold(String::new(), |acc, item| format!("{acc}{item}"));
@@ -209,11 +209,11 @@ impl WasmSubpath {
 		wrap_svg_tag(format!("{subpath_svg}{line_svg}{intersections_svg}"))
 	}
 
-	pub fn split(&self, t: f64, compute_type: String) -> String {
-		let (main_subpath, optional_subpath) = match compute_type.as_str() {
-			"Euclidean" => self.0.split(ComputeType::Euclidean(t)),
-			"Parametric" => self.0.split(ComputeType::Parametric(t)),
-			_ => panic!("Unexpected ComputeType string: '{}'", compute_type),
+	pub fn split(&self, t: f64, t_variant: String) -> String {
+		let (main_subpath, optional_subpath) = match t_variant.as_str() {
+			"Euclidean" => self.0.split(TValue::Euclidean(t)),
+			"Parametric" => self.0.split(TValue::Parametric(t)),
+			_ => panic!("Unexpected ComputeType string: '{}'", t_variant),
 		};
 
 		let mut main_subpath_svg = String::new();