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

Fix Bezier-rs interactive demos and migrate its Webpack bundler to Vite

Browse Source
This commit is contained in:
Keavon Chambers
2024-01-04 23:13:40 -08:00
parent bbece3fb65
commit d268afb7fb
27 changed files with 3580 additions and 3013 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/main.ts
+30 -33
View File
@@ -1,26 +1,36 @@
import { default as init } from "@/../wasm/pkg";
import BezierDemo from "@/components/BezierDemo";
import BezierDemoPane from "@/components/BezierDemoPane";
import SubpathDemo from "@/components/SubpathDemo";
import SubpathDemoPane from "@/components/SubpathDemoPane";
import type { BezierFeatureKey } from "@/features/bezier-features";
import bezierFeatures from "@/features/bezier-features";
import type { SubpathFeatureKey } from "@/features/subpath-features";
import subpathFeatures from "@/features/subpath-features";
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
(async () => {
await init();
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);
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);
window.addEventListener("hashchange", (e: Event) => {
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 renderBezierPane(featureName: BezierFeatureKey, container: HTMLElement | null) {
renderExamples();
})();
function renderBezierPane(featureName: BezierFeatureKey, container?: HTMLElement) {
const feature = bezierFeatures[featureName];
const demo = document.createElement("bezier-demo-pane");
@@ -30,7 +40,7 @@ function renderBezierPane(featureName: BezierFeatureKey, container: HTMLElement
container?.append(demo);
}
function renderSubpathPane(featureName: SubpathFeatureKey, container: HTMLElement | null) {
function renderSubpathPane(featureName: SubpathFeatureKey, container?: HTMLElement) {
const feature = subpathFeatures[featureName];
const demo = document.createElement("subpath-demo-pane");
@@ -46,17 +56,6 @@ function isUrlSolo(url: string): boolean {
return splitHash?.length === 3 && splitHash?.[2] === "solo";
}
window.addEventListener("hashchange", (e: Event) => {
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() {
const hash = window.location.hash;
const splitHash = hash.split("/");
@@ -64,10 +63,10 @@ function renderExamples() {
// 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"));
renderBezierPane(splitHash[1] as BezierFeatureKey, document.getElementById("bezier-demos") || undefined);
} 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"));
renderSubpathPane(splitHash[1] as SubpathFeatureKey, document.getElementById("subpath-demos") || undefined);
} else {
window.document.body.innerHTML = `
<h1 class="website-header">Bezier-rs Interactive Documentation</h1>
@@ -83,8 +82,8 @@ function renderExamples() {
<div id="subpath-demos"></div>
`.trim();
const bezierDemos = document.getElementById("bezier-demos");
const subpathDemos = document.getElementById("subpath-demos");
const bezierDemos = document.getElementById("bezier-demos") || undefined;
const subpathDemos = document.getElementById("subpath-demos") || undefined;
(Object.keys(bezierFeatures) as BezierFeatureKey[]).forEach((feature) => renderBezierPane(feature, bezierDemos));
(Object.keys(subpathFeatures) as SubpathFeatureKey[]).forEach((feature) => renderSubpathPane(feature, subpathDemos));
@@ -98,5 +97,3 @@ function renderExamples() {
}
}
}
renderExamples();