mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-11 04:00:56 +08:00
Simplify the Bezier-rs interactive web demo code (#2020)
* Change demo pane classes into simpler group functions * Eliminate classes * Use template strings for HTML * Reduce files and flatten directories * Restructuring to reduce redundant code * Eliminate the module pattern and consolidate both demo types * Further consolidate into main.ts
This commit is contained in:
Keavon Chambers
@@ -0,0 +1,589 @@
|
||||
import { WasmBezier } from "@/../wasm/pkg";
|
||||
import type { BezierDemoOptions, WasmBezierInstance, BezierCallback, InputOption } from "@/types";
|
||||
import { capOptions, tSliderOptions, bezierTValueVariantOptions, errorOptions, minimumSeparationOptions, BEZIER_T_VALUE_VARIANTS } from "@/types";
|
||||
|
||||
const bezierFeatures = {
|
||||
constructor: {
|
||||
name: "Constructor",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.to_svg(),
|
||||
},
|
||||
"bezier-through-points": {
|
||||
name: "Bezier Through Points",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
|
||||
const points = bezier.get_points();
|
||||
if (Object.values(options).length === 1) {
|
||||
return WasmBezier.quadratic_through_points(points, options.t);
|
||||
}
|
||||
return WasmBezier.cubic_through_points(points, options.t, options["midpoint separation"]);
|
||||
},
|
||||
demoOptions: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[30, 50],
|
||||
[120, 70],
|
||||
[160, 170],
|
||||
],
|
||||
inputOptions: [
|
||||
{
|
||||
variable: "t",
|
||||
inputType: "slider",
|
||||
min: 0.01,
|
||||
max: 0.99,
|
||||
step: 0.01,
|
||||
default: 0.5,
|
||||
},
|
||||
],
|
||||
},
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[30, 50],
|
||||
[120, 70],
|
||||
[160, 170],
|
||||
],
|
||||
inputOptions: [
|
||||
{
|
||||
variable: "t",
|
||||
inputType: "slider",
|
||||
min: 0.01,
|
||||
max: 0.99,
|
||||
step: 0.01,
|
||||
default: 0.5,
|
||||
},
|
||||
{
|
||||
variable: "midpoint separation",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 2,
|
||||
default: 30,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
length: {
|
||||
name: "Length",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.length(),
|
||||
},
|
||||
"length-centroid": {
|
||||
name: "Length Centroid",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.length_centroid(),
|
||||
},
|
||||
evaluate: {
|
||||
name: "Evaluate",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined): string => bezier.evaluate(options.t, BEZIER_T_VALUE_VARIANTS[options.TVariant]),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [bezierTValueVariantOptions, tSliderOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
"lookup-table": {
|
||||
name: "Lookup Table",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined): string => bezier.compute_lookup_table(options.steps, BEZIER_T_VALUE_VARIANTS[options.TVariant]),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [
|
||||
bezierTValueVariantOptions,
|
||||
{
|
||||
variable: "steps",
|
||||
inputType: "slider",
|
||||
min: 2,
|
||||
max: 15,
|
||||
step: 1,
|
||||
default: 5,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
derivative: {
|
||||
name: "Derivative",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.derivative(),
|
||||
demoOptions: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[30, 40],
|
||||
[110, 50],
|
||||
[120, 130],
|
||||
],
|
||||
},
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[50, 50],
|
||||
[60, 100],
|
||||
[100, 140],
|
||||
[140, 150],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
tangent: {
|
||||
name: "Tangent",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined): string => bezier.tangent(options.t, BEZIER_T_VALUE_VARIANTS[options.TVariant]),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [bezierTValueVariantOptions, tSliderOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
"tangents-to-point": {
|
||||
name: "Tangents To Point",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>, mouseLocation?: [number, number]): string =>
|
||||
mouseLocation ? bezier.tangents_to_point(mouseLocation[0], mouseLocation[1]) : bezier.to_svg(),
|
||||
triggerOnMouseMove: true,
|
||||
demoOptions: { Linear: { disabled: true } },
|
||||
},
|
||||
normal: {
|
||||
name: "Normal",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined): string => bezier.normal(options.t, BEZIER_T_VALUE_VARIANTS[options.TVariant]),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [bezierTValueVariantOptions, tSliderOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
"normals-to-point": {
|
||||
name: "Normals To Point",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>, mouseLocation?: [number, number]): string =>
|
||||
mouseLocation ? bezier.normals_to_point(mouseLocation[0], mouseLocation[1]) : bezier.to_svg(),
|
||||
triggerOnMouseMove: true,
|
||||
},
|
||||
curvature: {
|
||||
name: "Curvature",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined): string => bezier.curvature(options.t, BEZIER_T_VALUE_VARIANTS[options.TVariant]),
|
||||
demoOptions: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
Quadratic: {
|
||||
inputOptions: [bezierTValueVariantOptions, tSliderOptions],
|
||||
},
|
||||
Cubic: {
|
||||
inputOptions: [bezierTValueVariantOptions, { ...tSliderOptions, default: 0.7 }],
|
||||
},
|
||||
},
|
||||
},
|
||||
split: {
|
||||
name: "Split",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined): string => bezier.split(options.t, BEZIER_T_VALUE_VARIANTS[options.TVariant]),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [bezierTValueVariantOptions, tSliderOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
trim: {
|
||||
name: "Trim",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined): string => bezier.trim(options.t1, options.t2, BEZIER_T_VALUE_VARIANTS[options.TVariant]),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [
|
||||
bezierTValueVariantOptions,
|
||||
{
|
||||
variable: "t1",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.01,
|
||||
default: 0.25,
|
||||
},
|
||||
{
|
||||
variable: "t2",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.01,
|
||||
default: 0.75,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
project: {
|
||||
name: "Project",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>, mouseLocation?: [number, number]): string =>
|
||||
mouseLocation ? bezier.project(mouseLocation[0], mouseLocation[1]) : bezier.to_svg(),
|
||||
triggerOnMouseMove: true,
|
||||
},
|
||||
"local-extrema": {
|
||||
name: "Local Extrema",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.local_extrema(),
|
||||
demoOptions: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[40, 40],
|
||||
[160, 30],
|
||||
[110, 150],
|
||||
],
|
||||
},
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[160, 180],
|
||||
[170, 10],
|
||||
[30, 90],
|
||||
[180, 160],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
"bounding-box": {
|
||||
name: "Bounding Box",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.bounding_box(),
|
||||
},
|
||||
inflections: {
|
||||
name: "Inflections",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.inflections(),
|
||||
demoOptions: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
Quadratic: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
reduce: {
|
||||
name: "Reduce",
|
||||
callback: (bezier: WasmBezierInstance): string => bezier.reduce(),
|
||||
},
|
||||
offset: {
|
||||
name: "Offset",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.offset(options.distance),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [
|
||||
{
|
||||
variable: "distance",
|
||||
inputType: "slider",
|
||||
min: -30,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 15,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
outline: {
|
||||
name: "Outline",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.outline(options.distance, options.cap),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [
|
||||
{
|
||||
variable: "distance",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 15,
|
||||
},
|
||||
capOptions,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
"graduated-outline": {
|
||||
name: "Graduated Outline",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.graduated_outline(options.start_distance, options.end_distance, options.cap),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [
|
||||
{
|
||||
variable: "start_distance",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 5,
|
||||
},
|
||||
{
|
||||
variable: "end_distance",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 15,
|
||||
},
|
||||
capOptions,
|
||||
],
|
||||
},
|
||||
},
|
||||
customPoints: {
|
||||
Cubic: [
|
||||
[31, 94],
|
||||
[40, 40],
|
||||
[107, 107],
|
||||
[106, 106],
|
||||
],
|
||||
},
|
||||
},
|
||||
"skewed-outline": {
|
||||
name: "Skewed Outline",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string =>
|
||||
bezier.skewed_outline(options.distance1, options.distance2, options.distance3, options.distance4, options.cap),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [
|
||||
{
|
||||
variable: "distance1",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 20,
|
||||
},
|
||||
{
|
||||
variable: "distance2",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 10,
|
||||
},
|
||||
{
|
||||
variable: "distance3",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 30,
|
||||
},
|
||||
{
|
||||
variable: "distance4",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 5,
|
||||
},
|
||||
capOptions,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
arcs: {
|
||||
name: "Arcs",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.arcs(options.error, options.max_iterations, options.strategy),
|
||||
demoOptions: ((): BezierDemoOptions => {
|
||||
const inputOptions: InputOption[] = [
|
||||
{
|
||||
variable: "strategy",
|
||||
inputType: "dropdown",
|
||||
default: 0,
|
||||
options: ["Automatic", "FavorLargerArcs", "FavorCorrectness"],
|
||||
},
|
||||
{
|
||||
variable: "error",
|
||||
inputType: "slider",
|
||||
min: 0.05,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
default: 0.5,
|
||||
},
|
||||
{
|
||||
variable: "max_iterations",
|
||||
inputType: "slider",
|
||||
min: 50,
|
||||
max: 200,
|
||||
step: 1,
|
||||
default: 100,
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[70, 40],
|
||||
[180, 50],
|
||||
[160, 150],
|
||||
],
|
||||
inputOptions,
|
||||
disabled: false,
|
||||
},
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[160, 180],
|
||||
[170, 10],
|
||||
[30, 90],
|
||||
[180, 160],
|
||||
],
|
||||
inputOptions,
|
||||
disabled: false,
|
||||
},
|
||||
};
|
||||
})(),
|
||||
},
|
||||
"intersect-linear": {
|
||||
name: "Intersect (Linear Segment)",
|
||||
callback: (bezier: WasmBezierInstance): string => {
|
||||
const line = [
|
||||
[45, 30],
|
||||
[195, 160],
|
||||
];
|
||||
return bezier.intersect_line_segment(line);
|
||||
},
|
||||
},
|
||||
"intersect-quadratic": {
|
||||
name: "Intersect (Quadratic Segment)",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
|
||||
const quadratic = [
|
||||
[45, 80],
|
||||
[205, 10],
|
||||
[115, 120],
|
||||
];
|
||||
return bezier.intersect_quadratic_segment(quadratic, options.error, options.minimum_separation);
|
||||
},
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [errorOptions, minimumSeparationOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
"intersect-cubic": {
|
||||
name: "Intersect (Cubic Segment)",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
|
||||
const cubic = [
|
||||
[65, 20],
|
||||
[125, 40],
|
||||
[65, 120],
|
||||
[200, 140],
|
||||
];
|
||||
return bezier.intersect_cubic_segment(cubic, options.error, options.minimum_separation);
|
||||
},
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [errorOptions, minimumSeparationOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
"intersect-self": {
|
||||
name: "Intersect (Self)",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.intersect_self(options.error, options.minimum_separation),
|
||||
demoOptions: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
Quadratic: {
|
||||
disabled: true,
|
||||
},
|
||||
Cubic: {
|
||||
inputOptions: [errorOptions, minimumSeparationOptions],
|
||||
customPoints: [
|
||||
[160, 180],
|
||||
[170, 10],
|
||||
[30, 90],
|
||||
[180, 140],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
"intersect-rectangle": {
|
||||
name: "Intersect (Rectangle)",
|
||||
callback: (bezier: WasmBezierInstance): string =>
|
||||
bezier.intersect_rectangle([
|
||||
[75, 50],
|
||||
[175, 150],
|
||||
]),
|
||||
},
|
||||
rotate: {
|
||||
name: "Rotate",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.rotate(options.angle * Math.PI, 125, 100),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [
|
||||
{
|
||||
variable: "angle",
|
||||
inputType: "slider",
|
||||
min: 0,
|
||||
max: 2,
|
||||
step: 1 / 50,
|
||||
default: 0.12,
|
||||
unit: "π",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
"de-casteljau-points": {
|
||||
name: "De Casteljau Points",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined): string => bezier.de_casteljau_points(options.t, BEZIER_T_VALUE_VARIANTS[options.TVariant]),
|
||||
demoOptions: {
|
||||
Quadratic: {
|
||||
inputOptions: [bezierTValueVariantOptions, tSliderOptions],
|
||||
},
|
||||
},
|
||||
},
|
||||
join: {
|
||||
name: "Join",
|
||||
callback: (bezier: WasmBezierInstance): string => {
|
||||
const points = bezier.get_points();
|
||||
let examplePoints = [];
|
||||
if (points.length === 2) {
|
||||
examplePoints = [
|
||||
[145, 155],
|
||||
[65, 155],
|
||||
];
|
||||
} else if (points.length === 3) {
|
||||
examplePoints = [
|
||||
[65, 150],
|
||||
[120, 195],
|
||||
[190, 145],
|
||||
];
|
||||
} else {
|
||||
examplePoints = [
|
||||
[165, 150],
|
||||
[110, 110],
|
||||
[90, 180],
|
||||
[55, 140],
|
||||
];
|
||||
}
|
||||
return bezier.join(examplePoints);
|
||||
},
|
||||
demoOptions: {
|
||||
Linear: {
|
||||
customPoints: [
|
||||
[70, 40],
|
||||
[155, 90],
|
||||
],
|
||||
},
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[185, 40],
|
||||
[65, 20],
|
||||
[100, 85],
|
||||
],
|
||||
},
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[45, 80],
|
||||
[65, 20],
|
||||
[115, 100],
|
||||
[155, 55],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export type BezierFeatureKey = keyof typeof bezierFeatures;
|
||||
export type BezierFeatureOptions = {
|
||||
name: string;
|
||||
callback: BezierCallback;
|
||||
demoOptions?: Partial<BezierDemoOptions>;
|
||||
triggerOnMouseMove?: boolean;
|
||||
};
|
||||
export default bezierFeatures as Record<BezierFeatureKey, BezierFeatureOptions>;
|
||||
Reference in New Issue
Block a user