Bezier-rs: Add joins and caps to offsets and outlines (#1083)

* Intial work

* Improve miter and add round join

* Get arcs to go opposite direction

* Add cap and other refactors

* Rename joint to join, fix some bugs

* Fix single point issue

* Clean up

* Fix iframe sizes and update UI

* Address comments and handle single point outline

* Rename variables, fix branches in outline

* Address comments

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

@@ -45,3 +45,17 @@ export const subpathTValueVariantOptions = {
 	inputType: "dropdown",
 	options: SUBPATH_T_VALUE_VARIANTS,
 };
+
+export const joinOptions = {
+	variable: "join",
+	default: 0,
+	inputType: "dropdown",
+	options: ["Bevel", "Miter", "Round"],
+};
+
+export const capOptions = {
+	variable: "cap",
+	default: 0,
+	inputType: "dropdown",
+	options: ["Butt", "Round", "Square"],
+};

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

@@ -43,6 +43,10 @@ export function renderDemo(demo: Demo): void {
 				selectInput.append(option);
 			});
 
+			if (inputOption.disabled) {
+				selectInput.disabled = true;
+			}
+
 			selectInput.addEventListener("change", (event: Event): void => {
 				demo.sliderData[inputOption.variable] = Number((event.target as HTMLInputElement).value);
 				demo.drawDemo(figure);

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

@@ -22,6 +22,10 @@ export type BezierDemoOptions = {
 	};
 };
 
+export type SubpathInputOption = InputOption & {
+	isDisabledForClosed?: boolean;
+};
+
 export type InputOption = {
 	variable: string;
 	min?: number;
@@ -31,6 +35,7 @@ export type InputOption = {
 	unit?: string | string[];
 	inputType?: "slider" | "dropdown";
 	options?: string[];
+	disabled?: boolean;
 };
 
 export function getCurveType(numPoints: number): BezierCurveType {