Bezier-rs: Add project function for Subpaths (#914)

* Added subpath project function

* Set appropriate project default in single manipulator group case

* Lint

* Return optional from subpath project + stylistic changes per review

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Rob Nadal
2022-12-29 18:32:22 -05:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent 0d703e857b
commit 72cd204c64
5 changed files with 59 additions and 5 deletions
+13 -1
View File
@@ -19,7 +19,13 @@
<h2>Subpaths</h2>
<div v-for="(feature, index) in subpathFeatures" :key="index">
<SubpathExamplePane :name="feature.name" :callback="feature.callback" :sliderOptions="feature.sliderOptions" :chooseComputeType="feature.chooseComputeType" />
<SubpathExamplePane
:name="feature.name"
:callback="feature.callback"
:sliderOptions="feature.sliderOptions"
:triggerOnMouseMove="feature.triggerOnMouseMove"
:chooseComputeType="feature.chooseComputeType"
/>
</div>
</template>
@@ -605,6 +611,12 @@ export default defineComponent({
sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
chooseComputeType: true,
},
{
name: "Project",
callback: (subpath: WasmSubpathInstance, _: Record<string, number>, mouseLocation?: [number, number]): string =>
mouseLocation ? subpath.project(mouseLocation[0], mouseLocation[1]) : subpath.to_svg(),
triggerOnMouseMove: true,
},
{
name: "Intersect (Line Segment)",
callback: (subpath: WasmSubpathInstance): string =>
@@ -27,6 +27,7 @@ export default defineComponent({
closed: { type: Boolean as PropType<boolean>, default: false },
callback: { type: Function as PropType<SubpathCallback>, 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() {
@@ -68,6 +69,8 @@ export default defineComponent({
this.subpath[POINT_INDEX_TO_MANIPULATOR[this.activeIndex[1]]](this.activeIndex[0], mx, my);
this.mutableTriples[this.activeIndex[0]][this.activeIndex[1]] = [mx, my];
this.subpathSVG = this.callback(this.subpath, this.sliderData, [mx, my], this.computeType);
} else if (this.triggerOnMouseMove) {
this.subpathSVG = this.callback(this.subpath, this.sliderData, [mx, my], this.computeType);
}
},
getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),
@@ -12,7 +12,15 @@
</div>
<div class="example-row">
<div v-for="(example, index) in examples" :key="index">
<SubpathExample :title="example.title" :triples="example.triples" :closed="example.closed" :callback="callback" :sliderOptions="sliderOptions" :computeType="computeTypeChoice" />
<SubpathExample
:title="example.title"
:triples="example.triples"
:closed="example.closed"
:callback="callback"
:sliderOptions="sliderOptions"
:triggerOnMouseMove="triggerOnMouseMove"
:computeType="computeTypeChoice"
/>
</div>
</div>
</div>
@@ -32,6 +40,7 @@ export default defineComponent({
name: { type: String as PropType<string>, required: true },
callback: { type: Function as PropType<SubpathCallback>, required: true },
sliderOptions: { type: Array as PropType<Array<SliderOption>>, default: () => [] },
triggerOnMouseMove: { type: Boolean as PropType<boolean>, default: false },
chooseComputeType: { type: Boolean as PropType<boolean>, default: false },
},
data() {