Bezier-rs: Add hash URLs for individual API examples (#968)

* Handle displaying single demos

* Address comments

* Update eslintrc

* Add hash links

* Use hash instead of pathname

* Address small nits

* Change url format

* CSS improvements

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Hannah Li
2023-02-08 23:32:28 -05:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent 875f2a5cd1
commit ff51098c11
10 changed files with 209 additions and 87 deletions
@@ -1,4 +1,4 @@
import { BezierFeatureName } from "@/features/bezier-features";
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import { renderDemoPane } from "@/utils/render";
import { BezierCurveType, BEZIER_CURVE_TYPE, ComputeType, BezierDemoOptions, SliderOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
@@ -28,7 +28,9 @@ const demoDefaults = {
class BezierDemoPane extends HTMLElement implements DemoPane {
// Props
name!: BezierFeatureName;
key!: BezierFeatureKey;
name!: string;
demoOptions!: BezierDemoOptions;
@@ -44,10 +46,11 @@ class BezierDemoPane extends HTMLElement implements DemoPane {
computeType!: ComputeType;
connectedCallback(): void {
this.id = `${Math.random()}`.substring(2);
this.computeType = "Parametric";
this.name = (this.getAttribute("name") || "") as BezierFeatureName;
this.key = (this.getAttribute("name") || "") as BezierFeatureKey;
this.id = `bezier/${this.key}`;
this.name = bezierFeatures[this.key].name;
this.demoOptions = JSON.parse(this.getAttribute("demoOptions") || "[]");
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
this.chooseComputeType = this.getAttribute("chooseComputeType") === "true";
@@ -74,7 +77,7 @@ class BezierDemoPane extends HTMLElement implements DemoPane {
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("key", this.key);
bezierDemo.setAttribute("sliderOptions", JSON.stringify(demo.sliderOptions));
bezierDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
bezierDemo.setAttribute("computetype", this.computeType);