Bezier-rs: Refactor interactive demo to remove Vue (#959)

* Converted bezier example to vanilla js component * Indent with tabs * Add sliders * Converted bezier example pane to vanilla js * Implement the radio buttons + fixes * Converted SubpathExample to vanilla js * Converted SubpathExamplePane to vanilla js * Removed vue components * Remove App.vue * Remove vue and other dependencies * Minor fix in main.ts * Added insert to subpath features * Entry point tweaks * Rename "example" to "demo" * Kebab-case file names (except classes) Co-authored-by: Hannah Li <hannahli2010@gmail.com> Co-authored-by: Keavon Chambers <keavon@keavon.com>
2026-10-10 17:30:56 +08:00 · 2023-01-13 01:04:39 -08:00
parent 05a2cd32a5
commit 2f7c45771e
19 changed files with 1272 additions and 1065 deletions
@@ -0,0 +1,85 @@
+import { BezierFeatureName } from "@/features/bezier-features";
+import { renderDemoPane } from "@/utils/render";
+import { BezierCurveType, BEZIER_CURVE_TYPE, ComputeType, BezierDemoOptions, SliderOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
+
+const demoDefaults = {
+	Linear: {
+		points: [
+			[30, 60],
+			[140, 120],
+		],
+	},
+	Quadratic: {
+		points: [
+			[30, 50],
+			[140, 30],
+			[160, 170],
+		],
+	},
+	Cubic: {
+		points: [
+			[30, 30],
+			[60, 140],
+			[150, 30],
+			[160, 160],
+		],
+	},
+};
+
+class BezierDemoPane extends HTMLElement implements DemoPane {
+	// Props
+	name!: BezierFeatureName;
+
+	demoOptions!: BezierDemoOptions;
+
+	triggerOnMouseMove!: boolean;
+
+	chooseComputeType!: boolean;
+
+	// Data
+	demos!: BezierDemoArgs[];
+
+	id!: string;
+
+	computeType!: ComputeType;
+
+	connectedCallback(): void {
+		this.id = `${Math.random()}`.substring(2);
+		this.computeType = "Parametric";
+
+		this.name = (this.getAttribute("name") || "") as BezierFeatureName;
+		this.demoOptions = JSON.parse(this.getAttribute("demoOptions") || "[]");
+		this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
+		this.chooseComputeType = this.getAttribute("chooseComputeType") === "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) => {
+			const givenData = this.demoOptions[curveType];
+			const defaultData = demoDefaults[curveType];
+			return {
+				title: curveType,
+				disabled: givenData?.disabled || false,
+				points: givenData?.customPoints || defaultData.points,
+				sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
+			};
+		});
+		this.render();
+	}
+
+	render(): void {
+		renderDemoPane(this);
+	}
+
+	buildDemo(demo: BezierDemoArgs): Demo {
+		const bezierDemo = document.createElement("bezier-demo");
+		bezierDemo.setAttribute("title", demo.title);
+		bezierDemo.setAttribute("points", JSON.stringify(demo.points));
+		bezierDemo.setAttribute("name", this.name);
+		bezierDemo.setAttribute("sliderOptions", JSON.stringify(demo.sliderOptions));
+		bezierDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
+		bezierDemo.setAttribute("computetype", this.computeType);
+		return bezierDemo;
+	}
+}
+
+export default BezierDemoPane;