fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-08 04:28:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/components/BezierDemo.ts
+4 -4
View File
@@ -1,5 +1,5 @@
import { WasmBezier } from "@/../wasm/pkg";
import bezierFeatures, { BezierFeatureName } from "@/features/bezier-features";
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import { renderDemo } from "@/utils/render";
import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, SliderOption, WasmBezierManipulatorKey, ComputeType, Demo } from "@/utils/types";
@@ -18,7 +18,7 @@ class BezierDemo extends HTMLElement implements Demo {
points!: number[][];
name!: BezierFeatureName;
key!: BezierFeatureKey;
sliderOptions!: SliderOption[];
@@ -54,12 +54,12 @@ class BezierDemo extends HTMLElement implements Demo {
connectedCallback(): void {
this.title = this.getAttribute("title") || "";
this.points = JSON.parse(this.getAttribute("points") || "[]");
this.name = this.getAttribute("name") as BezierFeatureName;
this.key = this.getAttribute("key") as BezierFeatureKey;
this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
this.computeType = (this.getAttribute("computetype") || "Parametric") as ComputeType;
this.callback = bezierFeatures[this.name].callback as BezierCallback;
this.callback = bezierFeatures[this.key].callback as BezierCallback;
const curveType = getCurveType(this.points.length);
this.manipulatorKeys = MANIPULATOR_KEYS_FROM_BEZIER_TYPE[curveType];
website/other/bezier-rs-demos/src/components/BezierDemoPane.ts
+8 -5
View File
@@ -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);
website/other/bezier-rs-demos/src/components/SubpathDemo.ts
+4 -4
View File
@@ -1,5 +1,5 @@
import { WasmSubpath } from "@/../wasm/pkg";
import subpathFeatures, { SubpathFeatureName } from "@/features/subpath-features";
import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
import { renderDemo } from "@/utils/render";
import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, SliderOption, ComputeType } from "@/utils/types";
@@ -13,7 +13,7 @@ class SubpathDemo extends HTMLElement {
triples!: (number[] | undefined)[][];
name!: SubpathFeatureName;
key!: SubpathFeatureKey;
closed!: boolean;
@@ -51,13 +51,13 @@ class SubpathDemo extends HTMLElement {
connectedCallback(): void {
this.title = this.getAttribute("title") || "";
this.triples = JSON.parse(this.getAttribute("triples") || "[]");
this.name = this.getAttribute("name") as SubpathFeatureName;
this.key = this.getAttribute("key") as SubpathFeatureKey;
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.callback = subpathFeatures[this.key].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 })));
website/other/bezier-rs-demos/src/components/SubpathDemoPane.ts
+8 -5
View File
@@ -1,10 +1,12 @@
import { SubpathFeatureName } from "@/features/subpath-features";
import subpathFeatures, { SubpathFeatureKey } 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;
key!: SubpathFeatureKey;
name!: string;
sliderOptions!: SliderOption[];
@@ -45,10 +47,11 @@ class SubpathDemoPane extends HTMLElement implements DemoPane {
closed: true,
},
];
this.id = `${Math.random()}`.substring(2);
this.computeType = "Parametric";
this.name = (this.getAttribute("name") || "") as SubpathFeatureName;
this.key = (this.getAttribute("name") || "") as SubpathFeatureKey;
this.id = `subpath/${this.key}`;
this.name = subpathFeatures[this.key].name;
this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
this.chooseComputeType = this.getAttribute("chooseComputeType") === "true";
@@ -65,7 +68,7 @@ class SubpathDemoPane extends HTMLElement implements DemoPane {
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("key", this.key);
subpathDemo.setAttribute("sliderOptions", JSON.stringify(this.sliderOptions));
subpathDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
subpathDemo.setAttribute("computetype", this.computeType);