Bezier-rs: Convert from canvas to svg for constructors (#776)

* Convert constructor to use svg

* Convert the through_points functions to svg

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

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

@@ -4,15 +4,16 @@
 		<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" />
+		</div>
+		<div v-for="(feature, index) in features" :key="index">
 			<ExamplePane
 				:template="feature.template"
 				:templateOptions="feature.templateOptions"
 				:name="feature.name"
 				:callback="feature.callback"
-				:createThroughPoints="feature.createThroughPoints"
 				:curveDegrees="feature.curveDegrees"
 				:customPoints="feature.customPoints"
-				:customOptions="feature.customOptions"
 			/>
 		</div>
 		<h2>Subpaths</h2>
@@ -25,9 +26,11 @@
 <script lang="ts">
 import { defineComponent, markRaw } from "vue";
 
+import { WasmBezier } from "@/../wasm/pkg";
 import { drawBezier, drawBezierHelper, drawCircle, drawCircleSector, drawCurve, drawLine, drawPoint, drawText, getContextFromCanvas, COLORS } from "@/utils/drawing";
 import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
 
+import BezierExamplePane from "@/components/BezierExamplePane.vue";
 import ExamplePane from "@/components/ExamplePane.vue";
 import SliderExample from "@/components/SliderExample.vue";
 import SubpathExamplePane from "@/components/SubpathExamplePane.vue";
@@ -48,30 +51,45 @@ export default defineComponent({
 			bezierFeatures: [
 				{
 					name: "Constructor",
-					// eslint-disable-next-line
-					callback: (): void => {},
+					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.to_svg(),
 				},
 				{
 					name: "Bezier Through Points",
-					// eslint-disable-next-line
-					callback: (): void => {},
-					curveDegrees: new Set([BezierCurveType.Quadratic, BezierCurveType.Cubic]),
-					createThroughPoints: true,
-					template: markRaw(SliderExample),
-					templateOptions: {
-						sliders: [
-							{
-								min: 0.01,
-								max: 0.99,
-								step: 0.01,
-								default: 0.5,
-								variable: "t",
-							},
-						],
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
+						const points: Point[] = JSON.parse(bezier.get_points());
+						const formattedPoints: number[][] = points.map((p) => [p.x, p.y]);
+						if (Object.values(options).length === 1) {
+							return WasmBezier.quadratic_through_points(formattedPoints, options.t);
+						}
+						return WasmBezier.cubic_through_points(formattedPoints, options.t, options["midpoint separation"]);
 					},
-					customOptions: {
+					exampleOptions: {
+						[BezierCurveType.Linear]: {
+							disabled: true,
+						},
+						[BezierCurveType.Quadratic]: {
+							customPoints: [
+								[30, 50],
+								[120, 70],
+								[160, 170],
+							],
+							sliderOptions: [
+								{
+									min: 0.01,
+									max: 0.99,
+									step: 0.01,
+									default: 0.5,
+									variable: "t",
+								},
+							],
+						},
 						[BezierCurveType.Cubic]: {
-							sliders: [
+							customPoints: [
+								[30, 50],
+								[120, 70],
+								[160, 170],
+							],
+							sliderOptions: [
 								{
 									min: 0.01,
 									max: 0.99,
@@ -89,14 +107,9 @@ export default defineComponent({
 							],
 						},
 					},
-					customPoints: {
-						[BezierCurveType.Quadratic]: [
-							[30, 50],
-							[120, 70],
-							[160, 170],
-						],
-					},
 				},
+			],
+			features: [
 				{
 					name: "Length",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
@@ -586,6 +599,7 @@ export default defineComponent({
 		};
 	},
 	components: {
+		BezierExamplePane,
 		ExamplePane,
 		SubpathExamplePane,
 	},