fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-09 22:50:55 +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/main.ts
+70 -24
View File
@@ -3,26 +3,11 @@ import BezierDemoPane from "@/components/BezierDemoPane";
import SubpathDemo from "@/components/SubpathDemo";
import SubpathDemoPane from "@/components/SubpathDemoPane";
import bezierFeatures, { BezierFeatureName } from "@/features/bezier-features";
import subpathFeatures, { SubpathFeatureName } from "@/features/subpath-features";
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
import "@/style.css";
window.document.title = "Bezier-rs Interactive Documentation";
window.document.body.innerHTML = `
<h1>Bezier-rs Interactive Documentation</h1>
<p>
This is the interactive documentation for the <a href="https://crates.io/crates/bezier-rs"><b>Bezier-rs</b></a> library. View the
<a href="https://docs.rs/bezier-rs/latest/bezier_rs">crate documentation</a>
for detailed function descriptions and API usage. Click and drag on the endpoints of the demo curves to visualize the various Bezier utilities and functions.
</p>
<h2>Beziers</h2>
<div id="bezier-demos"></div>
<h2>Subpaths</h2>
<div id="subpath-demos"></div>
`.trim();
declare global {
interface HTMLElementTagNameMap {
"bezier-demo": BezierDemo;
@@ -32,13 +17,14 @@ declare global {
}
}
window.document.title = "Bezier-rs Interactive Documentation";
window.customElements.define("bezier-demo", BezierDemo);
window.customElements.define("bezier-demo-pane", BezierDemoPane);
window.customElements.define("subpath-demo", SubpathDemo);
window.customElements.define("subpath-demo-pane", SubpathDemoPane);
const bezierDemos = document.getElementById("bezier-demos");
(Object.keys(bezierFeatures) as BezierFeatureName[]).forEach((featureName) => {
function renderBezierPane(featureName: BezierFeatureKey, container: HTMLElement | null): void {
const feature = bezierFeatures[featureName];
const demo = document.createElement("bezier-demo-pane");
@@ -46,11 +32,10 @@ const bezierDemos = document.getElementById("bezier-demos");
demo.setAttribute("demoOptions", JSON.stringify(feature.demoOptions || {}));
demo.setAttribute("triggerOnMouseMove", String(feature.triggerOnMouseMove));
demo.setAttribute("chooseComputeType", String(feature.chooseComputeType));
bezierDemos?.append(demo);
});
container?.append(demo);
}
const subpathDemos = document.getElementById("subpath-demos");
(Object.keys(subpathFeatures) as SubpathFeatureName[]).forEach((featureName) => {
function renderSubpathPane(featureName: SubpathFeatureKey, container: HTMLElement | null): void {
const feature = subpathFeatures[featureName];
const demo = document.createElement("subpath-demo-pane");
@@ -58,5 +43,66 @@ const subpathDemos = document.getElementById("subpath-demos");
demo.setAttribute("sliderOptions", JSON.stringify(feature.sliderOptions || []));
demo.setAttribute("triggerOnMouseMove", String(feature.triggerOnMouseMove));
demo.setAttribute("chooseComputeType", String(feature.chooseComputeType));
subpathDemos?.append(demo);
container?.append(demo);
}
function isUrlSolo(url: string): boolean {
const hash = url.split("#")?.[1];
const splitHash = hash?.split("/");
return splitHash?.length === 3 && splitHash?.[2] === "solo";
}
window.addEventListener("hashchange", (e: Event): void => {
const hashChangeEvent = e as HashChangeEvent;
const isOldHashSolo = isUrlSolo(hashChangeEvent.oldURL);
const isNewHashSolo = isUrlSolo(hashChangeEvent.newURL);
const target = document.getElementById(window.location.hash.substring(1));
// Determine whether the page needs to recompute which examples to show
if (!target || isOldHashSolo !== isNewHashSolo) {
renderExamples();
}
});
function renderExamples(): void {
const hash = window.location.hash;
const splitHash = hash.split("/");
// Determine which examples to render based on hash
if (splitHash[0] === "#bezier" && splitHash[1] in bezierFeatures && splitHash[2] === "solo") {
window.document.body.innerHTML = `<div id="bezier-demos"></div>`;
renderBezierPane(splitHash[1] as BezierFeatureKey, document.getElementById("bezier-demos"));
} else if (splitHash[0] === "#subpath" && splitHash[1] in subpathFeatures && splitHash[2] === "solo") {
window.document.body.innerHTML = `<div id="subpath-demos"></div>`;
renderSubpathPane(splitHash[1] as SubpathFeatureKey, document.getElementById("subpath-demos"));
} else {
window.document.body.innerHTML = `
<h1>Bezier-rs Interactive Documentation</h1>
<p>
This is the interactive documentation for the <a href="https://crates.io/crates/bezier-rs"><b>Bezier-rs</b></a> library. View the
<a href="https://docs.rs/bezier-rs/latest/bezier_rs">crate documentation</a>
for detailed function descriptions and API usage. Click and drag on the endpoints of the demo curves to visualize the various Bezier utilities and functions.
</p>
<h2>Beziers</h2>
<div id="bezier-demos"></div>
<h2>Subpaths</h2>
<div id="subpath-demos"></div>
`.trim();
const bezierDemos = document.getElementById("bezier-demos");
const subpathDemos = document.getElementById("subpath-demos");
(Object.keys(bezierFeatures) as BezierFeatureKey[]).forEach((feature) => renderBezierPane(feature, bezierDemos));
(Object.keys(subpathFeatures) as SubpathFeatureKey[]).forEach((feature) => renderSubpathPane(feature, subpathDemos));
}
// Scroll to specified hash if it exists
if (hash) {
const target = document.getElementById(hash.substring(1));
if (target) {
target.scrollIntoView();
}
}
}
renderExamples();