Bezier-rs: continue converting demos from canvas to SVG (#779)

* Convert constructor to use svg

* Convert the through_points functions to svg

* Convert length, lut, derivative, and tangent from canvas to svg

* Fixed bug when t1 == t2 in split

* Converted split and trim to use svg representation, and swapped slider options default to use quadratic options

* Convert normal and curvature to use svg representation in bezier-rs-demos

* Convert the project function to use svg representation in bezier-rs-demos

* Convert the local_extrema, bbox, and inflections to use svgs

* Add text offset constants

* Fix typo

Co-authored-by: Robert Nadal <Robnadal44@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>

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

@@ -41,6 +41,10 @@ export default defineComponent({
 			type: Object as PropType<Array<SliderOption>>,
 			default: () => ({}),
 		},
+		triggerOnMouseMove: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const curveType = getCurveType(this.points.length);
@@ -81,6 +85,8 @@ export default defineComponent({
 				this.bezier[this.manipulatorKeys[this.activeIndex]](mx, my);
 				this.mutablePoints[this.activeIndex] = [mx, my];
 				this.bezierSVG = this.callback(this.bezier, this.sliderData);
+			} else if (this.triggerOnMouseMove) {
+				this.bezierSVG = this.callback(this.bezier, this.sliderData, { x: mx, y: my });
 			}
 		},
 		getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),

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

@@ -3,7 +3,14 @@
 		<h3 class="example-pane-header">{{ name }}</h3>
 		<div class="example-row">
 			<div v-for="(example, index) in examples" :key="index">
-				<BezierExample v-if="!example.disabled" :title="example.title" :points="example.points" :callback="callback" :sliderOptions="example.sliderOptions" />
+				<BezierExample
+					v-if="!example.disabled"
+					:title="example.title"
+					:points="example.points"
+					:callback="callback"
+					:sliderOptions="example.sliderOptions"
+					:triggerOnMouseMove="triggerOnMouseMove"
+				/>
 			</div>
 		</div>
 	</div>
@@ -12,7 +19,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { BezierCallback, BezierCurveType, ExampleOptions } from "@/utils/types";
+import { BezierCallback, BezierCurveType, ExampleOptions, SliderOption } from "@/utils/types";
 
 import BezierExample from "@/components/BezierExample.vue";
 
@@ -27,6 +34,10 @@ export default defineComponent({
 			type: Object as PropType<ExampleOptions>,
 			default: () => ({}),
 		},
+		triggerOnMouseMove: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const exampleDefaults = {
@@ -53,15 +64,18 @@ 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 || [];
+
 		return {
-			examples: Object.values(BezierCurveType).map((curveType) => {
+			examples: Object.values(BezierCurveType).map((curveType: BezierCurveType) => {
 				const givenData = this.exampleOptions[curveType];
 				const defaultData = exampleDefaults[curveType];
 				return {
 					title: curveType,
 					disabled: givenData?.disabled || false,
 					points: givenData?.customPoints || defaultData.points,
-					sliderOptions: givenData?.sliderOptions || [],
+					sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
 				};
 			}),
 		};