fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-04 11:18:11 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ddb2d744d4e471b60778089d5d98ca784f3505e8
Graphite/website/other/bezier-rs-demos/src/features-bezier.ts
T
Keavon Chambers a2465f40b3 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
2024-10-03 17:20:50 -07:00

590 lines
14 KiB
TypeScript
Raw Blame History

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 View Git Blame Copy Permalink