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-08 07:28:11 +08:00 · 2023-01-13 04:04:39 -05:00
parent 758f757783
commit 01853fe4b7
19 changed files with 1272 additions and 1065 deletions
@@ -0,0 +1,76 @@
+import { SubpathFeatureName } from "@/features/subpath-features";
+import { renderDemoPane } from "@/utils/render";
+import { ComputeType, Demo, DemoPane, SliderOption, SubpathDemoArgs } from "@/utils/types";
+
+class SubpathDemoPane extends HTMLElement implements DemoPane {
+	// Props
+	name!: SubpathFeatureName;
+
+	sliderOptions!: SliderOption[];
+
+	triggerOnMouseMove!: boolean;
+
+	chooseComputeType!: boolean;
+
+	// Data
+	demos!: SubpathDemoArgs[];
+
+	id!: string;
+
+	computeType!: ComputeType;
+
+	connectedCallback(): void {
+		this.demos = [
+			{
+				title: "Open Subpath",
+				triples: [
+					[[20, 20], undefined, [10, 90]],
+					[[150, 40], [60, 40], undefined],
+					[[175, 175], undefined, undefined],
+					[[100, 100], [40, 120], undefined],
+				],
+				closed: false,
+			},
+			{
+				title: "Closed Subpath",
+				triples: [
+					[[35, 125], undefined, [40, 40]],
+					[[130, 30], [120, 120], undefined],
+					[
+						[145, 150],
+						[175, 90],
+						[70, 185],
+					],
+				],
+				closed: true,
+			},
+		];
+		this.id = `${Math.random()}`.substring(2);
+		this.computeType = "Parametric";
+
+		this.name = (this.getAttribute("name") || "") as SubpathFeatureName;
+		this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
+		this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
+		this.chooseComputeType = this.getAttribute("chooseComputeType") === "true";
+
+		this.render();
+	}
+
+	render(): void {
+		renderDemoPane(this);
+	}
+
+	buildDemo(demo: SubpathDemoArgs): Demo {
+		const subpathDemo = document.createElement("subpath-demo");
+		subpathDemo.setAttribute("title", demo.title);
+		subpathDemo.setAttribute("triples", JSON.stringify(demo.triples));
+		subpathDemo.setAttribute("closed", String(demo.closed));
+		subpathDemo.setAttribute("name", this.name);
+		subpathDemo.setAttribute("sliderOptions", JSON.stringify(this.sliderOptions));
+		subpathDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
+		subpathDemo.setAttribute("computetype", this.computeType);
+		return subpathDemo;
+	}
+}
+
+export default SubpathDemoPane;