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

Bezier-rs: Add hash URLs for individual API examples (#968)

Browse Source 
* Handle displaying single demos

* Address comments

* Update eslintrc

* Add hash links

* Use hash instead of pathname

* Address small nits

* Change url format

* CSS improvements

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Hannah Li
2023-02-08 23:32:28 -05:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent 875f2a5cd1
commit ff51098c11
10 changed files with 209 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/features/bezier-features.ts
+59 -30
View File
@@ -3,10 +3,12 @@ import { tSliderOptions, tErrorOptions, tMinimumSeperationOptions } from "@/util
import { ComputeType, BezierDemoOptions, WasmBezierInstance, BezierCallback } from "@/utils/types";
const bezierFeatures = {
Constructor: {
constructor: {
name: "Constructor",
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.to_svg(),
},
"Bezier Through Points": {
"bezier-through-points": {
name: "Bezier Through Points",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
const points = JSON.parse(bezier.get_points());
if (Object.values(options).length === 1) {
@@ -59,10 +61,12 @@ const bezierFeatures = {
},
},
},
Length: {
length: {
name: "Length",
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.length(),
},
Evaluate: {
evaluate: {
name: "Evaluate",
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => bezier.evaluate(options.computeArgument, computeType),
demoOptions: {
Quadratic: {
@@ -71,7 +75,8 @@ const bezierFeatures = {
},
chooseComputeType: true,
},
"Lookup Table": {
"lookup-table": {
name: "Lookup Table",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.compute_lookup_table(options.steps),
demoOptions: {
Quadratic: {
@@ -87,7 +92,8 @@ const bezierFeatures = {
},
},
},
Derivative: {
derivative: {
name: "Derivative",
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.derivative(),
demoOptions: {
Linear: {
@@ -110,7 +116,8 @@ const bezierFeatures = {
},
},
},
Tangent: {
tangent: {
name: "Tangent",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.tangent(options.t),
demoOptions: {
Quadratic: {
@@ -118,7 +125,8 @@ const bezierFeatures = {
},
},
},
Normal: {
normal: {
name: "Normal",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.normal(options.t),
demoOptions: {
Quadratic: {
@@ -126,7 +134,8 @@ const bezierFeatures = {
},
},
},
Curvature: {
curvature: {
name: "Curvature",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.curvature(options.t),
demoOptions: {
Linear: {
@@ -137,7 +146,8 @@ const bezierFeatures = {
},
},
},
Split: {
split: {
name: "Split",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.split(options.t),
demoOptions: {
Quadratic: {
@@ -145,7 +155,8 @@ const bezierFeatures = {
},
},
},
Trim: {
trim: {
name: "Trim",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.trim(options.t1, options.t2),
demoOptions: {
Quadratic: {
@@ -168,12 +179,14 @@ const bezierFeatures = {
},
},
},
Project: {
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": {
"local-extrema": {
name: "Local Extrema",
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.local_extrema(),
demoOptions: {
Quadratic: {
@@ -193,10 +206,12 @@ const bezierFeatures = {
},
},
},
"Bounding Box": {
"bounding-box": {
name: "Bounding Box",
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.bounding_box(),
},
Inflections: {
inflections: {
name: "Inflections",
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.inflections(),
demoOptions: {
Linear: {
@@ -207,10 +222,12 @@ const bezierFeatures = {
},
},
},
Reduce: {
reduce: {
name: "Reduce",
callback: (bezier: WasmBezierInstance): string => bezier.reduce(),
},
Offset: {
offset: {
name: "Offset",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.offset(options.distance),
demoOptions: {
Quadratic: {
@@ -226,7 +243,8 @@ const bezierFeatures = {
},
},
},
Outline: {
outline: {
name: "Outline",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.outline(options.distance),
demoOptions: {
Quadratic: {
@@ -242,7 +260,8 @@ const bezierFeatures = {
},
},
},
"Graduated Outline": {
"graduated-outline": {
name: "Graduated Outline",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.graduated_outline(options.start_distance, options.end_distance),
demoOptions: {
Quadratic: {
@@ -273,7 +292,8 @@ const bezierFeatures = {
],
},
},
"Skewed Outline": {
"skewed-outline": {
name: "Skewed Outline",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.skewed_outline(options.distance1, options.distance2, options.distance3, options.distance4),
demoOptions: {
Quadratic: {
@@ -310,7 +330,8 @@ const bezierFeatures = {
},
},
},
Arcs: {
arcs: {
name: "Arcs",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.arcs(options.error, options.max_iterations, options.strategy),
demoOptions: ((): Omit<BezierDemoOptions, "Linear"> => {
const sliderOptions = [
@@ -361,7 +382,8 @@ const bezierFeatures = {
};
})(),
},
"Intersect (Line Segment)": {
"intersect-linear": {
name: "Intersect (Line Segment)",
callback: (bezier: WasmBezierInstance): string => {
const line = [
[150, 150],
@@ -370,7 +392,8 @@ const bezierFeatures = {
return bezier.intersect_line_segment(line);
},
},
"Intersect (Quadratic)": {
"intersect-quadratic": {
name: "Intersect (Quadratic)",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
const quadratic = [
[20, 80],
@@ -385,7 +408,8 @@ const bezierFeatures = {
},
},
},
"Intersect (Cubic)": {
"intersect-cubic": {
name: "Intersect (Cubic)",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
const cubic = [
[40, 20],
@@ -401,7 +425,8 @@ const bezierFeatures = {
},
},
},
"Intersect (Self)": {
"intersect-self": {
name: "Intersect (Self)",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.intersect_self(options.error),
demoOptions: {
Quadratic: {
@@ -417,14 +442,16 @@ const bezierFeatures = {
},
},
},
"Intersect (Rectangle)": {
"intersect-rectangle": {
name: "Intersect (Rectangle)",
callback: (bezier: WasmBezierInstance): string =>
bezier.intersect_rectangle([
[50, 50],
[150, 150],
]),
},
Rotate: {
rotate: {
name: "Rotate",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.rotate(options.angle * Math.PI, 100, 100),
demoOptions: {
Quadratic: {
@@ -441,7 +468,8 @@ const bezierFeatures = {
},
},
},
"De Casteljau Points": {
"de-casteljau-points": {
name: "De Casteljau Points",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.de_casteljau_points(options.t),
demoOptions: {
Quadratic: {
@@ -451,11 +479,12 @@ const bezierFeatures = {
},
};
export type BezierFeatureName = keyof typeof bezierFeatures;
export type BezierFeatureKey = keyof typeof bezierFeatures;
export type BezierFeatureOptions = {
name: string;
callback: BezierCallback;
demoOptions?: Partial<BezierDemoOptions>;
triggerOnMouseMove?: boolean;
chooseComputeType?: boolean;
};
export default bezierFeatures as Record<BezierFeatureName, BezierFeatureOptions>;
export default bezierFeatures as Record<BezierFeatureKey, BezierFeatureOptions>;
website/other/bezier-rs-demos/src/features/subpath-features.ts
+25 -13
View File
@@ -2,44 +2,53 @@ import { tSliderOptions } from "@/utils/options";
import { ComputeType, SliderOption, SubpathCallback, WasmSubpathInstance } from "@/utils/types";
const subpathFeatures = {
Constructor: {
constructor: {
name: "Constructor",
callback: (subpath: WasmSubpathInstance): string => subpath.to_svg(),
},
Insert: {
insert: {
name: "Insert",
callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => subpath.insert(options.computeArgument, computeType),
sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
// TODO: Uncomment this after implementing the Euclidean version
// chooseComputeType: true,
},
Length: {
length: {
name: "Length",
callback: (subpath: WasmSubpathInstance): string => subpath.length(),
},
Evaluate: {
evaluate: {
name: "Evaluate",
callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => subpath.evaluate(options.computeArgument, computeType),
sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
chooseComputeType: true,
},
Project: {
project: {
name: "Project",
callback: (subpath: WasmSubpathInstance, _: Record<string, number>, mouseLocation?: [number, number]): string =>
mouseLocation ? subpath.project(mouseLocation[0], mouseLocation[1]) : subpath.to_svg(),
triggerOnMouseMove: true,
},
Tangent: {
tangent: {
name: "Tangent",
callback: (subpath: WasmSubpathInstance, options: Record<string, number>): string => subpath.tangent(options.t),
sliderOptions: [tSliderOptions],
},
Normal: {
normal: {
name: "Normal",
callback: (subpath: WasmSubpathInstance, options: Record<string, number>): string => subpath.normal(options.t),
sliderOptions: [tSliderOptions],
},
"Intersect (Line Segment)": {
"intersect-linear": {
name: "Intersect (Line Segment)",
callback: (subpath: WasmSubpathInstance): string =>
subpath.intersect_line_segment([
[150, 150],
[20, 20],
]),
},
"Intersect (Quadratic segment)": {
"intersect-quadratic": {
name: "Intersect (Quadratic segment)",
callback: (subpath: WasmSubpathInstance): string =>
subpath.intersect_quadratic_segment([
[20, 80],
@@ -47,7 +56,8 @@ const subpathFeatures = {
[90, 120],
]),
},
"Intersect (Cubic segment)": {
"intersect-cubic": {
name: "Intersect (Cubic segment)",
callback: (subpath: WasmSubpathInstance): string =>
subpath.intersect_cubic_segment([
[40, 20],
@@ -56,7 +66,8 @@ const subpathFeatures = {
[175, 140],
]),
},
Split: {
split: {
name: "Split",
callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => subpath.split(options.computeArgument, computeType),
sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
// TODO: Uncomment this after implementing the Euclidean version
@@ -64,11 +75,12 @@ const subpathFeatures = {
},
};
export type SubpathFeatureName = keyof typeof subpathFeatures;
export type SubpathFeatureKey = keyof typeof subpathFeatures;
export type SubpathFeatureOptions = {
name: string;
callback: SubpathCallback;
sliderOptions?: SliderOption[];
triggerOnMouseMove?: boolean;
chooseComputeType?: boolean;
};
export default subpathFeatures as Record<SubpathFeatureName, SubpathFeatureOptions>;
export default subpathFeatures as Record<SubpathFeatureKey, SubpathFeatureOptions>;