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

Bezier-rs: Update interactive demo site UI/UX (#1085)

Browse Source 
* wip - change demo iframe styling

* fix typo

* change tVariant select from radio buttons to dropdown

* Added iframe styling

* fix linting errors

* Integrated tvariant picker as input options

* Updated points in demos

* Lint

* Clean up CSS

---------

Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Rob Nadal
2023-03-21 01:23:02 -04:00
committed by Keavon Chambers
co-authored by Thomas Cheng Keavon Chambers
parent bfbabbc4dc
commit 834cb1a227
15 changed files with 402 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/components/BezierDemo.ts
+7 -22
View File
@@ -1,7 +1,7 @@
import { WasmBezier } from "@/../wasm/pkg";
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import { renderDemo } from "@/utils/render";
import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, SliderOption, WasmBezierManipulatorKey, TVariant, Demo } from "@/utils/types";
import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, InputOption, WasmBezierManipulatorKey, Demo } from "@/utils/types";
const SELECTABLE_RANGE = 10;
@@ -20,12 +20,10 @@ class BezierDemo extends HTMLElement implements Demo {
key!: BezierFeatureKey;
sliderOptions!: SliderOption[];
inputOptions!: InputOption[];
triggerOnMouseMove!: boolean;
tVariant!: TVariant;
// Data
bezier!: WasmBezier;
@@ -39,33 +37,20 @@ class BezierDemo extends HTMLElement implements Demo {
sliderUnits!: Record<string, string | string[]>;
static get observedAttributes(): string[] {
return ["tvariant"];
}
attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
if (name === "tvariant" && oldValue) {
this.tVariant = (newValue || "Parametric") as TVariant;
const figure = this.querySelector("figure") as HTMLElement;
this.drawDemo(figure);
}
}
async connectedCallback(): Promise<void> {
this.title = this.getAttribute("title") || "";
this.points = JSON.parse(this.getAttribute("points") || "[]");
this.key = this.getAttribute("key") as BezierFeatureKey;
this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
this.inputOptions = JSON.parse(this.getAttribute("inputOptions") || "[]");
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
this.tVariant = (this.getAttribute("tvariant") || "Parametric") as TVariant;
this.callback = bezierFeatures[this.key].callback as BezierCallback;
const curveType = getCurveType(this.points.length);
this.manipulatorKeys = MANIPULATOR_KEYS_FROM_BEZIER_TYPE[curveType];
this.activeIndex = undefined as number | undefined;
this.sliderData = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.default })));
this.sliderUnits = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.unit })));
this.sliderData = Object.assign({}, ...this.inputOptions.map((s) => ({ [s.variable]: s.default })));
this.sliderUnits = Object.assign({}, ...this.inputOptions.map((s) => ({ [s.variable]: s.unit })));
this.render();
const figure = this.querySelector("figure") as HTMLElement;
@@ -79,7 +64,7 @@ class BezierDemo extends HTMLElement implements Demo {
}
drawDemo(figure: HTMLElement, mouseLocation?: [number, number]): void {
figure.innerHTML = this.callback(this.bezier, this.sliderData, mouseLocation, this.tVariant);
figure.innerHTML = this.callback(this.bezier, this.sliderData, mouseLocation);
}
onMouseDown(event: MouseEvent): void {
@@ -114,7 +99,7 @@ class BezierDemo extends HTMLElement implements Demo {
getSliderUnit(sliderValue: number, variable: string): string {
const sliderUnit = this.sliderUnits[variable];
return (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit) || "";
return (Array.isArray(sliderUnit) ? "" : sliderUnit) || "";
}
}
website/other/bezier-rs-demos/src/components/BezierDemoPane.ts
+13 -20
View File
@@ -1,27 +1,27 @@
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import { renderDemoPane } from "@/utils/render";
import { BezierCurveType, BEZIER_CURVE_TYPE, TVariant, BezierDemoOptions, SliderOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
import { BezierCurveType, BEZIER_CURVE_TYPE, BezierDemoOptions, InputOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
const demoDefaults = {
Linear: {
points: [
[30, 60],
[140, 120],
[55, 60],
[165, 120],
],
},
Quadratic: {
points: [
[30, 50],
[140, 30],
[160, 170],
[55, 50],
[165, 30],
[185, 170],
],
},
Cubic: {
points: [
[30, 30],
[60, 140],
[150, 30],
[160, 160],
[55, 30],
[85, 140],
[175, 30],
[185, 160],
],
},
};
@@ -36,25 +36,19 @@ class BezierDemoPane extends HTMLElement implements DemoPane {
triggerOnMouseMove!: boolean;
chooseTVariant!: boolean;
// Data
demos!: BezierDemoArgs[];
id!: string;
tVariant!: TVariant;
connectedCallback(): void {
this.tVariant = "Parametric";
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.chooseTVariant = this.getAttribute("chooseTVariant") === "true";
// Use quadratic slider options as a default if sliders are not provided for the other curve types.
const defaultSliderOptions: SliderOption[] = this.demoOptions.Quadratic?.sliderOptions || [];
const defaultSliderOptions: InputOption[] = this.demoOptions.Quadratic?.inputOptions || [];
this.demos = BEZIER_CURVE_TYPE.map((curveType: BezierCurveType) => {
const givenData = this.demoOptions[curveType];
const defaultData = demoDefaults[curveType];
@@ -62,7 +56,7 @@ class BezierDemoPane extends HTMLElement implements DemoPane {
title: curveType,
disabled: givenData?.disabled || false,
points: givenData?.customPoints || defaultData.points,
sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
inputOptions: givenData?.inputOptions || defaultSliderOptions,
};
});
this.render();
@@ -77,9 +71,8 @@ class BezierDemoPane extends HTMLElement implements DemoPane {
bezierDemo.setAttribute("title", demo.title);
bezierDemo.setAttribute("points", JSON.stringify(demo.points));
bezierDemo.setAttribute("key", this.key);
bezierDemo.setAttribute("sliderOptions", JSON.stringify(demo.sliderOptions));
bezierDemo.setAttribute("inputOptions", JSON.stringify(demo.inputOptions));
bezierDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
bezierDemo.setAttribute("tvariant", this.tVariant);
return bezierDemo;
}
}
website/other/bezier-rs-demos/src/components/SubpathDemo.ts
+7 -22
View File
@@ -2,7 +2,7 @@ import { WasmSubpath } from "@/../wasm/pkg";
import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
import { renderDemo } from "@/utils/render";
import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, SliderOption, TVariant } from "@/utils/types";
import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, InputOption } from "@/utils/types";
const SELECTABLE_RANGE = 10;
const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "set_in_handle", "set_out_handle"];
@@ -17,12 +17,10 @@ class SubpathDemo extends HTMLElement {
closed!: boolean;
sliderOptions!: SliderOption[];
inputOptions!: InputOption[];
triggerOnMouseMove!: boolean;
tVariant!: TVariant;
// Data
subpath!: WasmSubpath;
@@ -36,30 +34,17 @@ class SubpathDemo extends HTMLElement {
sliderUnits!: Record<string, string | string[]>;
static get observedAttributes(): string[] {
return ["tvariant"];
}
attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
if (name === "tvariant" && oldValue) {
this.tVariant = (newValue || "Parametric") as TVariant;
const figure = this.querySelector("figure") as HTMLElement;
this.drawDemo(figure);
}
}
async connectedCallback(): Promise<void> {
this.title = this.getAttribute("title") || "";
this.triples = JSON.parse(this.getAttribute("triples") || "[]");
this.key = this.getAttribute("key") as SubpathFeatureKey;
this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
this.inputOptions = JSON.parse(this.getAttribute("inputOptions") || "[]");
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
this.closed = this.getAttribute("closed") === "true";
this.tVariant = (this.getAttribute("tvariant") || "Parametric") as TVariant;
this.callback = subpathFeatures[this.key].callback as SubpathCallback;
this.sliderData = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.default })));
this.sliderUnits = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.unit })));
this.sliderData = Object.assign({}, ...this.inputOptions.map((s) => ({ [s.variable]: s.default })));
this.sliderUnits = Object.assign({}, ...this.inputOptions.map((s) => ({ [s.variable]: s.unit })));
this.render();
const figure = this.querySelector("figure") as HTMLElement;
@@ -73,7 +58,7 @@ class SubpathDemo extends HTMLElement {
}
drawDemo(figure: HTMLElement, mouseLocation?: [number, number]): void {
figure.innerHTML = this.callback(this.subpath, this.sliderData, mouseLocation, this.tVariant);
figure.innerHTML = this.callback(this.subpath, this.sliderData, mouseLocation);
}
onMouseDown(event: MouseEvent): void {
@@ -109,7 +94,7 @@ class SubpathDemo extends HTMLElement {
getSliderUnit(sliderValue: number, variable: string): string {
const sliderUnit = this.sliderUnits[variable];
return (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit) || "";
return (Array.isArray(sliderUnit) ? "" : sliderUnit) || "";
}
}
website/other/bezier-rs-demos/src/components/SubpathDemoPane.ts
+13 -20
View File
@@ -1,6 +1,6 @@
import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
import { renderDemoPane } from "@/utils/render";
import { TVariant, Demo, DemoPane, SliderOption, SubpathDemoArgs } from "@/utils/types";
import { Demo, DemoPane, InputOption, SubpathDemoArgs } from "@/utils/types";
class SubpathDemoPane extends HTMLElement implements DemoPane {
// Props
@@ -8,52 +8,46 @@ class SubpathDemoPane extends HTMLElement implements DemoPane {
name!: string;
sliderOptions!: SliderOption[];
inputOptions!: InputOption[];
triggerOnMouseMove!: boolean;
chooseTVariant!: boolean;
// Data
demos!: SubpathDemoArgs[];
id!: string;
tVariant!: TVariant;
connectedCallback(): void {
this.demos = [
{
title: "Open Subpath",
triples: [
[[20, 20], undefined, [10, 90]],
[[150, 40], [60, 40], undefined],
[[175, 175], undefined, undefined],
[[100, 100], [40, 120], undefined],
[[45, 20], undefined, [35, 90]],
[[175, 40], [85, 40], undefined],
[[200, 175], undefined, undefined],
[[125, 100], [65, 120], undefined],
],
closed: false,
},
{
title: "Closed Subpath",
triples: [
[[35, 125], undefined, [40, 40]],
[[130, 30], [120, 120], undefined],
[[60, 125], undefined, [65, 40]],
[[155, 30], [145, 120], undefined],
[
[145, 150],
[175, 90],
[70, 185],
[170, 150],
[200, 90],
[95, 185],
],
],
closed: true,
},
];
this.tVariant = "Parametric";
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.inputOptions = JSON.parse(this.getAttribute("inputOptions") || "[]");
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
this.chooseTVariant = this.getAttribute("chooseTVariant") === "true";
this.render();
}
@@ -68,9 +62,8 @@ class SubpathDemoPane extends HTMLElement implements DemoPane {
subpathDemo.setAttribute("triples", JSON.stringify(demo.triples));
subpathDemo.setAttribute("closed", String(demo.closed));
subpathDemo.setAttribute("key", this.key);
subpathDemo.setAttribute("sliderOptions", JSON.stringify(this.sliderOptions));
subpathDemo.setAttribute("inputOptions", JSON.stringify(this.inputOptions));
subpathDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
subpathDemo.setAttribute("tvariant", this.tVariant);
return subpathDemo;
}
}