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-07 17:18:12 +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,116 @@
+import { WasmSubpath } from "@/../wasm/pkg";
+import subpathFeatures, { SubpathFeatureName } from "@/features/subpath-features";
+import { renderDemo } from "@/utils/render";
+
+import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, SliderOption, ComputeType } from "@/utils/types";
+
+const SELECTABLE_RANGE = 10;
+const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "set_in_handle", "set_out_handle"];
+
+class SubpathDemo extends HTMLElement {
+	// Props
+	title!: string;
+
+	triples!: (number[] | undefined)[][];
+
+	name!: SubpathFeatureName;
+
+	closed!: boolean;
+
+	sliderOptions!: SliderOption[];
+
+	triggerOnMouseMove!: boolean;
+
+	computeType!: ComputeType;
+
+	// Data
+	subpath!: WasmSubpath;
+
+	callback!: SubpathCallback;
+
+	manipulatorKeys!: WasmSubpathManipulatorKey[];
+
+	activeIndex!: number[] | undefined;
+
+	sliderData!: Record<string, number>;
+
+	sliderUnits!: Record<string, string | string[]>;
+
+	static get observedAttributes(): string[] {
+		return ["computetype"];
+	}
+
+	attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+		if (name === "computetype" && oldValue) {
+			this.computeType = (newValue || "Parametric") as ComputeType;
+			const figure = this.querySelector("figure") as HTMLElement;
+			this.drawDemo(figure);
+		}
+	}
+
+	connectedCallback(): void {
+		this.title = this.getAttribute("title") || "";
+		this.triples = JSON.parse(this.getAttribute("triples") || "[]");
+		this.name = this.getAttribute("name") as SubpathFeatureName;
+		this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
+		this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
+		this.closed = this.getAttribute("closed") === "true";
+		this.computeType = (this.getAttribute("computetype") || "Parametric") as ComputeType;
+
+		this.callback = subpathFeatures[this.name].callback as SubpathCallback;
+		this.subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
+		this.sliderData = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.default })));
+		this.sliderUnits = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.unit })));
+
+		this.render();
+
+		const figure = this.querySelector("figure") as HTMLElement;
+		this.drawDemo(figure);
+	}
+
+	render(): void {
+		renderDemo(this);
+	}
+
+	drawDemo(figure: HTMLElement, mouseLocation?: [number, number]): void {
+		figure.innerHTML = this.callback(this.subpath, this.sliderData, mouseLocation, this.computeType);
+	}
+
+	onMouseDown(event: MouseEvent): void {
+		const mx = event.offsetX;
+		const my = event.offsetY;
+		for (let controllerIndex = 0; controllerIndex < this.triples.length; controllerIndex += 1) {
+			for (let pointIndex = 0; pointIndex < 3; pointIndex += 1) {
+				const point = this.triples[controllerIndex][pointIndex];
+				if (point && Math.abs(mx - point[0]) < SELECTABLE_RANGE && Math.abs(my - point[1]) < SELECTABLE_RANGE) {
+					this.activeIndex = [controllerIndex, pointIndex];
+					return;
+				}
+			}
+		}
+	}
+
+	onMouseUp(): void {
+		this.activeIndex = undefined;
+	}
+
+	onMouseMove(event: MouseEvent): void {
+		const mx = event.offsetX;
+		const my = event.offsetY;
+		const figure = event.currentTarget as HTMLElement;
+		if (this.activeIndex) {
+			this.subpath[POINT_INDEX_TO_MANIPULATOR[this.activeIndex[1]]](this.activeIndex[0], mx, my);
+			this.triples[this.activeIndex[0]][this.activeIndex[1]] = [mx, my];
+			this.drawDemo(figure);
+		} else if (this.triggerOnMouseMove) {
+			this.drawDemo(figure, [mx, my]);
+		}
+	}
+
+	getSliderUnit(sliderValue: number, variable: string): string {
+		const sliderUnit = this.sliderUnits[variable];
+		return (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit) || "";
+	}
+}
+
+export default SubpathDemo;