mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-09 01:08:11 +08:00
Bezier-rs: Add Euclidean parameterization to Bezier::evaluate (#828)
* Add enum to evaluate for differenciating compute type * Add euclidean parameterization and update styling in the UI Co-authored-by: Rob Nadal <robnadal44@gmail.com> * Update usage of evaluate in graphite * Add description * Code review changes * Update tests * Improve ComputeType ergonomics * Large code review/cleanup pass Co-authored-by: Rob Nadal <robnadal44@gmail.com> Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Hannah Li
committed by
Keavon Chambers
Keavon Chambers
co-authored by
Rob Nadal
Keavon Chambers
Rob Nadal
Keavon Chambers
parent
a220bfa759
commit
01a9724389
@@ -9,42 +9,31 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { WasmBezier } from "@/../wasm/pkg";
|
||||
import { getConstructorKey, getCurveType } from "@/utils/helpers";
|
||||
import { BezierCallback, BezierCurveType, WasmBezierManipulatorKey, SliderOption } from "@/utils/types";
|
||||
import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, WasmBezierManipulatorKey, SliderOption, ComputeType } from "@/utils/types";
|
||||
|
||||
const SELECTABLE_RANGE = 10;
|
||||
|
||||
// Given the number of points in the curve, map the index of a point to the correct manipulator key
|
||||
const MANIPULATOR_KEYS_FROM_BEZIER_TYPE: { [key in BezierCurveType]: WasmBezierManipulatorKey[] } = {
|
||||
[BezierCurveType.Linear]: ["set_start", "set_end"],
|
||||
[BezierCurveType.Quadratic]: ["set_start", "set_handle_start", "set_end"],
|
||||
[BezierCurveType.Cubic]: ["set_start", "set_handle_start", "set_handle_end", "set_end"],
|
||||
Linear: ["set_start", "set_end"],
|
||||
Quadratic: ["set_start", "set_handle_start", "set_end"],
|
||||
Cubic: ["set_start", "set_handle_start", "set_handle_end", "set_end"],
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
title: String,
|
||||
points: {
|
||||
type: Array as PropType<Array<Array<number>>>,
|
||||
required: true,
|
||||
mutable: true,
|
||||
},
|
||||
callback: {
|
||||
type: Function as PropType<BezierCallback>,
|
||||
required: true,
|
||||
},
|
||||
sliderOptions: {
|
||||
type: Object as PropType<Array<SliderOption>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
triggerOnMouseMove: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: { type: String as PropType<string>, required: true },
|
||||
points: { type: Array as PropType<Array<Array<number>>>, required: true, mutable: true },
|
||||
callback: { type: Function as PropType<BezierCallback>, required: true },
|
||||
sliderOptions: { type: Object as PropType<Array<SliderOption>>, default: () => ({}) },
|
||||
triggerOnMouseMove: { type: Boolean as PropType<boolean>, default: false },
|
||||
computeType: { type: String as PropType<ComputeType>, default: "Parametric" },
|
||||
},
|
||||
data() {
|
||||
const curveType = getCurveType(this.points.length);
|
||||
@@ -55,7 +44,7 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
bezier,
|
||||
bezierSVG: this.callback(bezier, sliderData),
|
||||
bezierSVG: this.callback(bezier, sliderData, undefined, "Euclidean"),
|
||||
manipulatorKeys,
|
||||
activeIndex: undefined as number | undefined,
|
||||
mutablePoints: JSON.parse(JSON.stringify(this.points)),
|
||||
@@ -84,9 +73,9 @@ export default defineComponent({
|
||||
if (this.activeIndex !== undefined) {
|
||||
this.bezier[this.manipulatorKeys[this.activeIndex]](mx, my);
|
||||
this.mutablePoints[this.activeIndex] = [mx, my];
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData);
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
|
||||
} else if (this.triggerOnMouseMove) {
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, [mx, my]);
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, [mx, my], this.computeType);
|
||||
}
|
||||
},
|
||||
getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),
|
||||
@@ -94,18 +83,15 @@ export default defineComponent({
|
||||
watch: {
|
||||
sliderData: {
|
||||
handler() {
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData);
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
computeType: {
|
||||
handler() {
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-figure {
|
||||
border: solid 1px black;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="example-pane-container">
|
||||
<h3 class="example-pane-header">{{ name }}</h3>
|
||||
<div v-if="chooseComputeType" class="compute-type-choice">
|
||||
<strong>ComputeType:</strong>
|
||||
|
||||
<input type="radio" :id="`${id}-parametric`" value="Parametric" v-model="computeTypeChoice" />
|
||||
<label :for="`${id}-parametric`">Parametric</label>
|
||||
|
||||
<input type="radio" :id="`${id}-euclidean`" value="Euclidean" v-model="computeTypeChoice" />
|
||||
<label :for="`${id}-euclidean`">Euclidean</label>
|
||||
</div>
|
||||
<div class="example-row">
|
||||
<div v-for="(example, index) in examples" :key="index">
|
||||
<BezierExample
|
||||
@@ -10,51 +19,46 @@
|
||||
:callback="callback"
|
||||
:sliderOptions="example.sliderOptions"
|
||||
:triggerOnMouseMove="triggerOnMouseMove"
|
||||
:computeType="computeTypeChoice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { BezierCallback, BezierCurveType, ExampleOptions, SliderOption } from "@/utils/types";
|
||||
import { BezierCallback, BezierCurveType, BEZIER_CURVE_TYPE, ComputeType, ExampleOptions, SliderOption } from "@/utils/types";
|
||||
|
||||
import BezierExample from "@/components/BezierExample.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
name: String,
|
||||
callback: {
|
||||
type: Function as PropType<BezierCallback>,
|
||||
required: true,
|
||||
},
|
||||
exampleOptions: {
|
||||
type: Object as PropType<ExampleOptions>,
|
||||
default: () => ({}),
|
||||
},
|
||||
triggerOnMouseMove: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
name: { type: String as PropType<string>, required: true },
|
||||
callback: { type: Function as PropType<BezierCallback>, required: true },
|
||||
exampleOptions: { type: Object as PropType<ExampleOptions>, default: () => ({}) },
|
||||
triggerOnMouseMove: { type: Boolean as PropType<boolean>, default: false },
|
||||
chooseComputeType: { type: Boolean as PropType<boolean>, default: false },
|
||||
},
|
||||
data() {
|
||||
const exampleDefaults = {
|
||||
[BezierCurveType.Linear]: {
|
||||
Linear: {
|
||||
points: [
|
||||
[30, 60],
|
||||
[140, 120],
|
||||
],
|
||||
},
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
points: [
|
||||
[30, 50],
|
||||
[140, 30],
|
||||
[160, 170],
|
||||
],
|
||||
},
|
||||
[BezierCurveType.Cubic]: {
|
||||
Cubic: {
|
||||
points: [
|
||||
[30, 30],
|
||||
[60, 140],
|
||||
@@ -65,10 +69,10 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
// Use quadratic slider options as a default if sliders are not provided for the other curve types.
|
||||
const defaultSliderOptions: SliderOption[] = this.exampleOptions[BezierCurveType.Quadratic]?.sliderOptions || [];
|
||||
const defaultSliderOptions: SliderOption[] = this.exampleOptions.Quadratic?.sliderOptions || [];
|
||||
|
||||
return {
|
||||
examples: Object.values(BezierCurveType).map((curveType: BezierCurveType) => {
|
||||
examples: BEZIER_CURVE_TYPE.map((curveType: BezierCurveType) => {
|
||||
const givenData = this.exampleOptions[curveType];
|
||||
const defaultData = exampleDefaults[curveType];
|
||||
return {
|
||||
@@ -78,6 +82,8 @@ export default defineComponent({
|
||||
sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
|
||||
};
|
||||
}),
|
||||
id: `${Math.random()}`.substring(2),
|
||||
computeTypeChoice: "Parametric" as ComputeType,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
@@ -85,15 +91,3 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.example-pane-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
@@ -16,20 +18,10 @@ const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
title: String,
|
||||
triples: {
|
||||
type: Array as PropType<Array<Array<number[] | undefined>>>,
|
||||
required: true,
|
||||
mutable: true,
|
||||
},
|
||||
closed: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
default: false,
|
||||
},
|
||||
callback: {
|
||||
type: Function as PropType<SubpathCallback>,
|
||||
required: true,
|
||||
},
|
||||
title: { type: String as PropType<string>, required: true },
|
||||
triples: { type: Array as PropType<Array<Array<number[] | undefined>>>, mutable: true, required: true },
|
||||
closed: { type: Boolean as PropType<boolean>, default: false },
|
||||
callback: { type: Function as PropType<SubpathCallback>, required: true },
|
||||
},
|
||||
data() {
|
||||
const subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
|
||||
@@ -69,11 +61,3 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-figure {
|
||||
border: solid 1px black;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
@@ -18,11 +20,8 @@ import SubpathExample from "@/components/SubpathExample.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
name: String,
|
||||
callback: {
|
||||
type: Function as PropType<SubpathCallback>,
|
||||
required: true,
|
||||
},
|
||||
name: { type: String as PropType<string>, required: true },
|
||||
callback: { type: Function as PropType<SubpathCallback>, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -58,15 +57,3 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.example-pane-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user