Fix Bezier-rs interactive demos and migrate its Webpack bundler to Vite

This commit is contained in:
Keavon Chambers
2024-01-04 23:13:40 -08:00
parent bbece3fb65
commit d268afb7fb
27 changed files with 3580 additions and 3013 deletions
@@ -1,7 +1,9 @@
import { WasmBezier } from "@/../wasm/pkg";
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import type { BezierFeatureKey } from "@/features/bezier-features";
import bezierFeatures from "@/features/bezier-features";
import { renderDemo } from "@/utils/render";
import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, InputOption, WasmBezierManipulatorKey, Demo } from "@/utils/types";
import type { BezierCallback, BezierCurveType, InputOption, WasmBezierManipulatorKey, Demo } from "@/utils/types";
import { getConstructorKey, getCurveType } from "@/utils/types";
const SELECTABLE_RANGE = 10;
@@ -54,8 +56,7 @@ class BezierDemo extends HTMLElement implements Demo {
this.render();
const figure = this.querySelector("figure") as HTMLElement;
const wasm = await import("@/../wasm/pkg");
this.bezier = wasm.WasmBezier[getConstructorKey(curveType)](this.points);
this.bezier = WasmBezier[getConstructorKey(curveType)](this.points);
this.drawDemo(figure);
}
@@ -1,6 +1,8 @@
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import type { BezierFeatureKey } from "@/features/bezier-features";
import bezierFeatures from "@/features/bezier-features";
import { renderDemoPane } from "@/utils/render";
import { BezierCurveType, BEZIER_CURVE_TYPE, BezierDemoOptions, InputOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
import type { BezierCurveType, BezierDemoOptions, InputOption, DemoPane, BezierDemoArgs } from "@/utils/types";
import { BEZIER_CURVE_TYPE } from "@/utils/types";
const demoDefaults = {
Linear: {
@@ -66,7 +68,7 @@ class BezierDemoPane extends HTMLElement implements DemoPane {
renderDemoPane(this);
}
buildDemo(demo: BezierDemoArgs): Demo {
buildDemo(demo: BezierDemoArgs): HTMLElement {
const bezierDemo = document.createElement("bezier-demo");
bezierDemo.setAttribute("title", demo.title);
bezierDemo.setAttribute("points", JSON.stringify(demo.points));
@@ -1,8 +1,8 @@
import { WasmSubpath } from "@/../wasm/pkg";
import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
import type { SubpathFeatureKey } from "@/features/subpath-features";
import subpathFeatures from "@/features/subpath-features";
import { renderDemo } from "@/utils/render";
import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, InputOption } from "@/utils/types";
import type { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, InputOption } from "@/utils/types";
const SELECTABLE_RANGE = 10;
const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "set_in_handle", "set_out_handle"];
@@ -48,8 +48,7 @@ class SubpathDemo extends HTMLElement {
this.render();
const figure = this.querySelector("figure") as HTMLElement;
const wasm = await import("@/../wasm/pkg");
this.subpath = wasm.WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
this.subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
this.drawDemo(figure);
}
@@ -1,6 +1,7 @@
import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
import type { SubpathFeatureKey } from "@/features/subpath-features";
import subpathFeatures from "@/features/subpath-features";
import { renderDemoPane } from "@/utils/render";
import { Demo, DemoPane, SubpathDemoArgs, SubpathInputOption } from "@/utils/types";
import type { DemoPane, SubpathDemoArgs, SubpathInputOption } from "@/utils/types";
class SubpathDemoPane extends HTMLElement implements DemoPane {
// Props
@@ -56,7 +57,7 @@ class SubpathDemoPane extends HTMLElement implements DemoPane {
renderDemoPane(this);
}
buildDemo(demo: SubpathDemoArgs): Demo {
buildDemo(demo: SubpathDemoArgs): HTMLElement {
const subpathDemo = document.createElement("subpath-demo");
subpathDemo.setAttribute("title", demo.title);
subpathDemo.setAttribute("triples", JSON.stringify(demo.triples));