mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-07 11:38:12 +08:00
Bezier-rs: Refactor interactive demo to remove Vue (#959)
* Converted bezier example to vanilla js component * Indent with tabs * Add sliders * Converted bezier example pane to vanilla js * Implement the radio buttons + fixes * Converted SubpathExample to vanilla js * Converted SubpathExamplePane to vanilla js * Removed vue components * Remove App.vue * Remove vue and other dependencies * Minor fix in main.ts * Added insert to subpath features * Entry point tweaks * Rename "example" to "demo" * Kebab-case file names (except classes) Co-authored-by: Hannah Li <hannahli2010@gmail.com> Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Rob Nadal
committed by
Keavon Chambers
Keavon Chambers
co-authored by
Hannah Li
Keavon Chambers
Hannah Li
Keavon Chambers
parent
05a2cd32a5
commit
2f7c45771e
@@ -0,0 +1,120 @@
|
||||
import { WasmBezier } from "@/../wasm/pkg";
|
||||
import bezierFeatures, { BezierFeatureName } from "@/features/bezier-features";
|
||||
import { renderDemo } from "@/utils/render";
|
||||
import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, SliderOption, WasmBezierManipulatorKey, ComputeType, Demo } 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[] } = {
|
||||
Linear: ["set_start", "set_end"],
|
||||
Quadratic: ["set_start", "set_handle_start", "set_end"],
|
||||
Cubic: ["set_start", "set_handle_start", "set_handle_end", "set_end"],
|
||||
};
|
||||
|
||||
class BezierDemo extends HTMLElement implements Demo {
|
||||
// Props
|
||||
title!: string;
|
||||
|
||||
points!: number[][];
|
||||
|
||||
name!: BezierFeatureName;
|
||||
|
||||
sliderOptions!: SliderOption[];
|
||||
|
||||
triggerOnMouseMove!: boolean;
|
||||
|
||||
computeType!: ComputeType;
|
||||
|
||||
// Data
|
||||
bezier!: WasmBezier;
|
||||
|
||||
callback!: BezierCallback;
|
||||
|
||||
manipulatorKeys!: WasmBezierManipulatorKey[];
|
||||
|
||||
activeIndex!: number | undefined;
|
||||
|
||||
sliderData!: Record<string, number>;
|
||||
|
||||
sliderUnits!: Record<string, string | string[]>;
|
||||
|
||||
static get observedAttributes(): string[] {
|
||||
return ["computetype"];
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
|
||||
if (name === "computetype" && oldValue) {
|
||||
this.computeType = (newValue || "Parametric") as ComputeType;
|
||||
const figure = this.querySelector("figure") as HTMLElement;
|
||||
this.drawDemo(figure);
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback(): void {
|
||||
this.title = this.getAttribute("title") || "";
|
||||
this.points = JSON.parse(this.getAttribute("points") || "[]");
|
||||
this.name = this.getAttribute("name") as BezierFeatureName;
|
||||
this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
|
||||
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
|
||||
this.computeType = (this.getAttribute("computetype") || "Parametric") as ComputeType;
|
||||
|
||||
this.callback = bezierFeatures[this.name].callback as BezierCallback;
|
||||
const curveType = getCurveType(this.points.length);
|
||||
|
||||
this.manipulatorKeys = MANIPULATOR_KEYS_FROM_BEZIER_TYPE[curveType];
|
||||
this.bezier = WasmBezier[getConstructorKey(curveType)](this.points);
|
||||
this.activeIndex = undefined as number | undefined;
|
||||
this.sliderData = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.default })));
|
||||
this.sliderUnits = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.unit })));
|
||||
this.render();
|
||||
|
||||
const figure = this.querySelector("figure") as HTMLElement;
|
||||
this.drawDemo(figure);
|
||||
}
|
||||
|
||||
render(): void {
|
||||
renderDemo(this);
|
||||
}
|
||||
|
||||
drawDemo(figure: HTMLElement, mouseLocation?: [number, number]): void {
|
||||
figure.innerHTML = this.callback(this.bezier, this.sliderData, mouseLocation, this.computeType);
|
||||
}
|
||||
|
||||
onMouseDown(event: MouseEvent): void {
|
||||
const mx = event.offsetX;
|
||||
const my = event.offsetY;
|
||||
for (let pointIndex = 0; pointIndex < this.points.length; pointIndex += 1) {
|
||||
const point = this.points[pointIndex];
|
||||
if (point && Math.abs(mx - point[0]) < SELECTABLE_RANGE && Math.abs(my - point[1]) < SELECTABLE_RANGE) {
|
||||
this.activeIndex = pointIndex;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMouseUp(): void {
|
||||
this.activeIndex = undefined;
|
||||
}
|
||||
|
||||
onMouseMove(event: MouseEvent): void {
|
||||
const mx = event.offsetX;
|
||||
const my = event.offsetY;
|
||||
const figure = event.currentTarget as HTMLElement;
|
||||
|
||||
if (this.activeIndex !== undefined) {
|
||||
this.bezier[this.manipulatorKeys[this.activeIndex]](mx, my);
|
||||
this.points[this.activeIndex] = [mx, my];
|
||||
this.drawDemo(figure);
|
||||
} else if (this.triggerOnMouseMove) {
|
||||
this.drawDemo(figure, [mx, my]);
|
||||
}
|
||||
}
|
||||
|
||||
getSliderUnit(sliderValue: number, variable: string): string {
|
||||
const sliderUnit = this.sliderUnits[variable];
|
||||
return (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit) || "";
|
||||
}
|
||||
}
|
||||
|
||||
export default BezierDemo;
|
||||
@@ -0,0 +1,85 @@
|
||||
import { BezierFeatureName } from "@/features/bezier-features";
|
||||
import { renderDemoPane } from "@/utils/render";
|
||||
import { BezierCurveType, BEZIER_CURVE_TYPE, ComputeType, BezierDemoOptions, SliderOption, Demo, DemoPane, BezierDemoArgs } from "@/utils/types";
|
||||
|
||||
const demoDefaults = {
|
||||
Linear: {
|
||||
points: [
|
||||
[30, 60],
|
||||
[140, 120],
|
||||
],
|
||||
},
|
||||
Quadratic: {
|
||||
points: [
|
||||
[30, 50],
|
||||
[140, 30],
|
||||
[160, 170],
|
||||
],
|
||||
},
|
||||
Cubic: {
|
||||
points: [
|
||||
[30, 30],
|
||||
[60, 140],
|
||||
[150, 30],
|
||||
[160, 160],
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
class BezierDemoPane extends HTMLElement implements DemoPane {
|
||||
// Props
|
||||
name!: BezierFeatureName;
|
||||
|
||||
demoOptions!: BezierDemoOptions;
|
||||
|
||||
triggerOnMouseMove!: boolean;
|
||||
|
||||
chooseComputeType!: boolean;
|
||||
|
||||
// Data
|
||||
demos!: BezierDemoArgs[];
|
||||
|
||||
id!: string;
|
||||
|
||||
computeType!: ComputeType;
|
||||
|
||||
connectedCallback(): void {
|
||||
this.id = `${Math.random()}`.substring(2);
|
||||
this.computeType = "Parametric";
|
||||
|
||||
this.name = (this.getAttribute("name") || "") as BezierFeatureName;
|
||||
this.demoOptions = JSON.parse(this.getAttribute("demoOptions") || "[]");
|
||||
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
|
||||
this.chooseComputeType = this.getAttribute("chooseComputeType") === "true";
|
||||
// Use quadratic slider options as a default if sliders are not provided for the other curve types.
|
||||
const defaultSliderOptions: SliderOption[] = this.demoOptions.Quadratic?.sliderOptions || [];
|
||||
this.demos = BEZIER_CURVE_TYPE.map((curveType: BezierCurveType) => {
|
||||
const givenData = this.demoOptions[curveType];
|
||||
const defaultData = demoDefaults[curveType];
|
||||
return {
|
||||
title: curveType,
|
||||
disabled: givenData?.disabled || false,
|
||||
points: givenData?.customPoints || defaultData.points,
|
||||
sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
|
||||
};
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render(): void {
|
||||
renderDemoPane(this);
|
||||
}
|
||||
|
||||
buildDemo(demo: BezierDemoArgs): Demo {
|
||||
const bezierDemo = document.createElement("bezier-demo");
|
||||
bezierDemo.setAttribute("title", demo.title);
|
||||
bezierDemo.setAttribute("points", JSON.stringify(demo.points));
|
||||
bezierDemo.setAttribute("name", this.name);
|
||||
bezierDemo.setAttribute("sliderOptions", JSON.stringify(demo.sliderOptions));
|
||||
bezierDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
|
||||
bezierDemo.setAttribute("computetype", this.computeType);
|
||||
return bezierDemo;
|
||||
}
|
||||
}
|
||||
|
||||
export default BezierDemoPane;
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4 class="example-header">{{ title }}</h4>
|
||||
<figure @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onMouseMove" class="example-figure" v-html="bezierSVG"></figure>
|
||||
<div v-for="(slider, index) in sliderOptions" :key="index">
|
||||
<div class="slider-label">{{ slider.variable }} = {{ sliderData[slider.variable] }}{{ getSliderValue(sliderData[slider.variable], sliderUnits[slider.variable]) }}</div>
|
||||
<input class="slider" v-model.number="sliderData[slider.variable]" type="range" :step="slider.step" :min="slider.min" :max="slider.max" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { WasmBezier } from "@/../wasm/pkg";
|
||||
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[] } = {
|
||||
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: { 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);
|
||||
const manipulatorKeys = MANIPULATOR_KEYS_FROM_BEZIER_TYPE[curveType];
|
||||
|
||||
const bezier = WasmBezier[getConstructorKey(curveType)](this.points);
|
||||
const sliderData = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.default })));
|
||||
|
||||
return {
|
||||
bezier,
|
||||
bezierSVG: this.callback(bezier, sliderData, undefined, "Euclidean"),
|
||||
manipulatorKeys,
|
||||
activeIndex: undefined as number | undefined,
|
||||
mutablePoints: JSON.parse(JSON.stringify(this.points)),
|
||||
sliderData,
|
||||
sliderUnits: Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.unit }))),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onMouseDown(event: MouseEvent) {
|
||||
const mx = event.offsetX;
|
||||
const my = event.offsetY;
|
||||
for (let pointIndex = 0; pointIndex < this.points.length; pointIndex += 1) {
|
||||
const point = this.mutablePoints[pointIndex];
|
||||
if (point && Math.abs(mx - point[0]) < SELECTABLE_RANGE && Math.abs(my - point[1]) < SELECTABLE_RANGE) {
|
||||
this.activeIndex = pointIndex;
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseUp() {
|
||||
this.activeIndex = undefined;
|
||||
},
|
||||
onMouseMove(event: MouseEvent) {
|
||||
const mx = event.offsetX;
|
||||
const my = event.offsetY;
|
||||
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, undefined, this.computeType);
|
||||
} else if (this.triggerOnMouseMove) {
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, [mx, my], this.computeType);
|
||||
}
|
||||
},
|
||||
getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),
|
||||
},
|
||||
watch: {
|
||||
sliderData: {
|
||||
handler() {
|
||||
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>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<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
|
||||
v-if="!example.disabled"
|
||||
:title="example.title"
|
||||
:points="example.points"
|
||||
: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, BEZIER_CURVE_TYPE, ComputeType, ExampleOptions, SliderOption } from "@/utils/types";
|
||||
|
||||
import BezierExample from "@/components/BezierExample.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
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 = {
|
||||
Linear: {
|
||||
points: [
|
||||
[30, 60],
|
||||
[140, 120],
|
||||
],
|
||||
},
|
||||
Quadratic: {
|
||||
points: [
|
||||
[30, 50],
|
||||
[140, 30],
|
||||
[160, 170],
|
||||
],
|
||||
},
|
||||
Cubic: {
|
||||
points: [
|
||||
[30, 30],
|
||||
[60, 140],
|
||||
[150, 30],
|
||||
[160, 160],
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// Use quadratic slider options as a default if sliders are not provided for the other curve types.
|
||||
const defaultSliderOptions: SliderOption[] = this.exampleOptions.Quadratic?.sliderOptions || [];
|
||||
|
||||
return {
|
||||
examples: BEZIER_CURVE_TYPE.map((curveType: BezierCurveType) => {
|
||||
const givenData = this.exampleOptions[curveType];
|
||||
const defaultData = exampleDefaults[curveType];
|
||||
return {
|
||||
title: curveType,
|
||||
disabled: givenData?.disabled || false,
|
||||
points: givenData?.customPoints || defaultData.points,
|
||||
sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
|
||||
};
|
||||
}),
|
||||
id: `${Math.random()}`.substring(2),
|
||||
computeTypeChoice: "Parametric" as ComputeType,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
BezierExample,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
import { WasmSubpath } from "@/../wasm/pkg";
|
||||
import subpathFeatures, { SubpathFeatureName } from "@/features/subpath-features";
|
||||
import { renderDemo } from "@/utils/render";
|
||||
|
||||
import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, SliderOption, ComputeType } from "@/utils/types";
|
||||
|
||||
const SELECTABLE_RANGE = 10;
|
||||
const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "set_in_handle", "set_out_handle"];
|
||||
|
||||
class SubpathDemo extends HTMLElement {
|
||||
// Props
|
||||
title!: string;
|
||||
|
||||
triples!: (number[] | undefined)[][];
|
||||
|
||||
name!: SubpathFeatureName;
|
||||
|
||||
closed!: boolean;
|
||||
|
||||
sliderOptions!: SliderOption[];
|
||||
|
||||
triggerOnMouseMove!: boolean;
|
||||
|
||||
computeType!: ComputeType;
|
||||
|
||||
// Data
|
||||
subpath!: WasmSubpath;
|
||||
|
||||
callback!: SubpathCallback;
|
||||
|
||||
manipulatorKeys!: WasmSubpathManipulatorKey[];
|
||||
|
||||
activeIndex!: number[] | undefined;
|
||||
|
||||
sliderData!: Record<string, number>;
|
||||
|
||||
sliderUnits!: Record<string, string | string[]>;
|
||||
|
||||
static get observedAttributes(): string[] {
|
||||
return ["computetype"];
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
|
||||
if (name === "computetype" && oldValue) {
|
||||
this.computeType = (newValue || "Parametric") as ComputeType;
|
||||
const figure = this.querySelector("figure") as HTMLElement;
|
||||
this.drawDemo(figure);
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback(): void {
|
||||
this.title = this.getAttribute("title") || "";
|
||||
this.triples = JSON.parse(this.getAttribute("triples") || "[]");
|
||||
this.name = this.getAttribute("name") as SubpathFeatureName;
|
||||
this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
|
||||
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
|
||||
this.closed = this.getAttribute("closed") === "true";
|
||||
this.computeType = (this.getAttribute("computetype") || "Parametric") as ComputeType;
|
||||
|
||||
this.callback = subpathFeatures[this.name].callback as SubpathCallback;
|
||||
this.subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
|
||||
this.sliderData = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.default })));
|
||||
this.sliderUnits = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.unit })));
|
||||
|
||||
this.render();
|
||||
|
||||
const figure = this.querySelector("figure") as HTMLElement;
|
||||
this.drawDemo(figure);
|
||||
}
|
||||
|
||||
render(): void {
|
||||
renderDemo(this);
|
||||
}
|
||||
|
||||
drawDemo(figure: HTMLElement, mouseLocation?: [number, number]): void {
|
||||
figure.innerHTML = this.callback(this.subpath, this.sliderData, mouseLocation, this.computeType);
|
||||
}
|
||||
|
||||
onMouseDown(event: MouseEvent): void {
|
||||
const mx = event.offsetX;
|
||||
const my = event.offsetY;
|
||||
for (let controllerIndex = 0; controllerIndex < this.triples.length; controllerIndex += 1) {
|
||||
for (let pointIndex = 0; pointIndex < 3; pointIndex += 1) {
|
||||
const point = this.triples[controllerIndex][pointIndex];
|
||||
if (point && Math.abs(mx - point[0]) < SELECTABLE_RANGE && Math.abs(my - point[1]) < SELECTABLE_RANGE) {
|
||||
this.activeIndex = [controllerIndex, pointIndex];
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMouseUp(): void {
|
||||
this.activeIndex = undefined;
|
||||
}
|
||||
|
||||
onMouseMove(event: MouseEvent): void {
|
||||
const mx = event.offsetX;
|
||||
const my = event.offsetY;
|
||||
const figure = event.currentTarget as HTMLElement;
|
||||
if (this.activeIndex) {
|
||||
this.subpath[POINT_INDEX_TO_MANIPULATOR[this.activeIndex[1]]](this.activeIndex[0], mx, my);
|
||||
this.triples[this.activeIndex[0]][this.activeIndex[1]] = [mx, my];
|
||||
this.drawDemo(figure);
|
||||
} else if (this.triggerOnMouseMove) {
|
||||
this.drawDemo(figure, [mx, my]);
|
||||
}
|
||||
}
|
||||
|
||||
getSliderUnit(sliderValue: number, variable: string): string {
|
||||
const sliderUnit = this.sliderUnits[variable];
|
||||
return (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit) || "";
|
||||
}
|
||||
}
|
||||
|
||||
export default SubpathDemo;
|
||||
@@ -0,0 +1,76 @@
|
||||
import { SubpathFeatureName } from "@/features/subpath-features";
|
||||
import { renderDemoPane } from "@/utils/render";
|
||||
import { ComputeType, Demo, DemoPane, SliderOption, SubpathDemoArgs } from "@/utils/types";
|
||||
|
||||
class SubpathDemoPane extends HTMLElement implements DemoPane {
|
||||
// Props
|
||||
name!: SubpathFeatureName;
|
||||
|
||||
sliderOptions!: SliderOption[];
|
||||
|
||||
triggerOnMouseMove!: boolean;
|
||||
|
||||
chooseComputeType!: boolean;
|
||||
|
||||
// Data
|
||||
demos!: SubpathDemoArgs[];
|
||||
|
||||
id!: string;
|
||||
|
||||
computeType!: ComputeType;
|
||||
|
||||
connectedCallback(): void {
|
||||
this.demos = [
|
||||
{
|
||||
title: "Open Subpath",
|
||||
triples: [
|
||||
[[20, 20], undefined, [10, 90]],
|
||||
[[150, 40], [60, 40], undefined],
|
||||
[[175, 175], undefined, undefined],
|
||||
[[100, 100], [40, 120], undefined],
|
||||
],
|
||||
closed: false,
|
||||
},
|
||||
{
|
||||
title: "Closed Subpath",
|
||||
triples: [
|
||||
[[35, 125], undefined, [40, 40]],
|
||||
[[130, 30], [120, 120], undefined],
|
||||
[
|
||||
[145, 150],
|
||||
[175, 90],
|
||||
[70, 185],
|
||||
],
|
||||
],
|
||||
closed: true,
|
||||
},
|
||||
];
|
||||
this.id = `${Math.random()}`.substring(2);
|
||||
this.computeType = "Parametric";
|
||||
|
||||
this.name = (this.getAttribute("name") || "") as SubpathFeatureName;
|
||||
this.sliderOptions = JSON.parse(this.getAttribute("sliderOptions") || "[]");
|
||||
this.triggerOnMouseMove = this.getAttribute("triggerOnMouseMove") === "true";
|
||||
this.chooseComputeType = this.getAttribute("chooseComputeType") === "true";
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
render(): void {
|
||||
renderDemoPane(this);
|
||||
}
|
||||
|
||||
buildDemo(demo: SubpathDemoArgs): Demo {
|
||||
const subpathDemo = document.createElement("subpath-demo");
|
||||
subpathDemo.setAttribute("title", demo.title);
|
||||
subpathDemo.setAttribute("triples", JSON.stringify(demo.triples));
|
||||
subpathDemo.setAttribute("closed", String(demo.closed));
|
||||
subpathDemo.setAttribute("name", this.name);
|
||||
subpathDemo.setAttribute("sliderOptions", JSON.stringify(this.sliderOptions));
|
||||
subpathDemo.setAttribute("triggerOnMouseMove", String(this.triggerOnMouseMove));
|
||||
subpathDemo.setAttribute("computetype", this.computeType);
|
||||
return subpathDemo;
|
||||
}
|
||||
}
|
||||
|
||||
export default SubpathDemoPane;
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4 class="example-header">{{ title }}</h4>
|
||||
<figure @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onMouseMove" class="example-figure" v-html="subpathSVG"></figure>
|
||||
<div v-for="(slider, index) in sliderOptions" :key="index">
|
||||
<div class="slider-label">{{ slider.variable }} = {{ sliderData[slider.variable] }}{{ getSliderValue(sliderData[slider.variable], sliderUnits[slider.variable]) }}</div>
|
||||
<input class="slider" v-model.number="sliderData[slider.variable]" type="range" :step="slider.step" :min="slider.min" :max="slider.max" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { WasmSubpath } from "@/../wasm/pkg";
|
||||
import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, SliderOption, ComputeType } from "@/utils/types";
|
||||
|
||||
const SELECTABLE_RANGE = 10;
|
||||
const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "set_in_handle", "set_out_handle"];
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
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 },
|
||||
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 subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
|
||||
|
||||
const sliderData = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.default })));
|
||||
const sliderUnits = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.unit })));
|
||||
|
||||
return {
|
||||
subpath,
|
||||
subpathSVG: this.callback(subpath, sliderData, undefined, "Euclidean"),
|
||||
activeIndex: undefined as number[] | undefined,
|
||||
mutableTriples: JSON.parse(JSON.stringify(this.triples)),
|
||||
sliderData,
|
||||
sliderUnits,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onMouseDown(event: MouseEvent) {
|
||||
const mx = event.offsetX;
|
||||
const my = event.offsetY;
|
||||
for (let controllerIndex = 0; controllerIndex < this.mutableTriples.length; controllerIndex += 1) {
|
||||
for (let pointIndex = 0; pointIndex < 3; pointIndex += 1) {
|
||||
const point = this.mutableTriples[controllerIndex][pointIndex];
|
||||
if (point && Math.abs(mx - point[0]) < SELECTABLE_RANGE && Math.abs(my - point[1]) < SELECTABLE_RANGE) {
|
||||
this.activeIndex = [controllerIndex, pointIndex];
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseUp() {
|
||||
this.activeIndex = undefined;
|
||||
},
|
||||
onMouseMove(event: MouseEvent) {
|
||||
const mx = event.offsetX;
|
||||
const my = event.offsetY;
|
||||
if (this.activeIndex) {
|
||||
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),
|
||||
},
|
||||
watch: {
|
||||
sliderData: {
|
||||
handler() {
|
||||
this.subpathSVG = this.callback(this.subpath, this.sliderData, undefined, this.computeType);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
computeType: {
|
||||
handler() {
|
||||
this.subpathSVG = this.callback(this.subpath, this.sliderData, undefined, this.computeType);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<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">
|
||||
<SubpathExample
|
||||
:title="example.title"
|
||||
:triples="example.triples"
|
||||
:closed="example.closed"
|
||||
:callback="callback"
|
||||
:sliderOptions="sliderOptions"
|
||||
:triggerOnMouseMove="triggerOnMouseMove"
|
||||
:computeType="computeTypeChoice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { SubpathCallback, SliderOption, ComputeType } from "@/utils/types";
|
||||
|
||||
import SubpathExample from "@/components/SubpathExample.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
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() {
|
||||
return {
|
||||
examples: [
|
||||
{
|
||||
title: "Open Subpath",
|
||||
triples: [
|
||||
[[20, 20], undefined, [10, 90]],
|
||||
[[150, 40], [60, 40], undefined],
|
||||
[[175, 175], undefined, undefined],
|
||||
[[100, 100], [40, 120], undefined],
|
||||
],
|
||||
closed: false,
|
||||
},
|
||||
{
|
||||
title: "Closed Subpath",
|
||||
triples: [
|
||||
[[35, 125], undefined, [40, 40]],
|
||||
[[130, 30], [120, 120], undefined],
|
||||
[
|
||||
[145, 150],
|
||||
[175, 90],
|
||||
[70, 185],
|
||||
],
|
||||
],
|
||||
closed: true,
|
||||
},
|
||||
],
|
||||
id: `${Math.random()}`.substring(2),
|
||||
computeTypeChoice: "Parametric" as ComputeType,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
SubpathExample,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user