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

Bezier-rs: Refactor interactive demo to remove Vue (#959)

Browse Source 
* 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>
This commit is contained in:
Rob Nadal
2023-01-13 04:04:39 -05:00
committed by Keavon Chambers
co-authored by Hannah Li Keavon Chambers
parent 758f757783
commit 01853fe4b7
19 changed files with 1272 additions and 1065 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/main.ts
+59 -4
View File
@@ -1,7 +1,62 @@
import { createApp } from "vue";
import BezierDemo from "@/components/BezierDemo";
import BezierDemoPane from "@/components/BezierDemoPane";
import SubpathDemo from "@/components/SubpathDemo";
import SubpathDemoPane from "@/components/SubpathDemoPane";
import App from "@/App.vue";
import bezierFeatures, { BezierFeatureName } from "@/features/bezier-features";
import subpathFeatures, { SubpathFeatureName } from "@/features/subpath-features";
document.title = "Bezier-rs Interactive Documentation";
import "@/style.css";
createApp(App).mount("#app");
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);
});