mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-03 22:28:11 +08:00
2f7c45771e
* 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>
63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
import BezierDemo from "@/components/BezierDemo";
|
|
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 "@/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;
|
|
"bezier-demo-pane": BezierDemoPane;
|
|
"subpath-demo": SubpathDemo;
|
|
"subpath-demo-pane": SubpathDemoPane;
|
|
}
|
|
}
|
|
|
|
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) => {
|
|
const feature = bezierFeatures[featureName];
|
|
const demo = document.createElement("bezier-demo-pane");
|
|
|
|
demo.setAttribute("name", featureName);
|
|
demo.setAttribute("demoOptions", JSON.stringify(feature.demoOptions || {}));
|
|
demo.setAttribute("triggerOnMouseMove", String(feature.triggerOnMouseMove));
|
|
demo.setAttribute("chooseComputeType", String(feature.chooseComputeType));
|
|
bezierDemos?.append(demo);
|
|
});
|
|
|
|
const subpathDemos = document.getElementById("subpath-demos");
|
|
(Object.keys(subpathFeatures) as SubpathFeatureName[]).forEach((featureName) => {
|
|
const feature = subpathFeatures[featureName];
|
|
const demo = document.createElement("subpath-demo-pane");
|
|
|
|
demo.setAttribute("name", featureName);
|
|
demo.setAttribute("sliderOptions", JSON.stringify(feature.sliderOptions || []));
|
|
demo.setAttribute("triggerOnMouseMove", String(feature.triggerOnMouseMove));
|
|
demo.setAttribute("chooseComputeType", String(feature.chooseComputeType));
|
|
subpathDemos?.append(demo);
|
|
});
|