Bezier length implementation (#676)

* added approximated length func to bezier class

* Added length functionality to interactive documentation. Co-authored-by: Hannah Li <[email protected]>

* fixed typo

* fix quadratic check

* Modified length function to use new length impl

Co-authored-by: Hannah Li <[email protected]>

* Fixed errors in length function

Co-authored-by: Hannah Li <[email protected]>

* Refactor WasmBezier constructor interface

* Adjust eslint settings

* fixed bug with end point

* Replaced missing example headers

* Refactor to better use DVec2

* Additional minor changes

* Adjust variable names

Co-authored-by: Thomas Cheng <[email protected]>
Co-authored-by: Robert Nadal <[email protected]>

Author: 3 people

.vscode/settings.json

@@ -24,7 +24,8 @@
 	// ESLint config
 	"eslint.format.enable": true,
 	"eslint.workingDirectories": [
-		"./frontend"
+		"./frontend",
+		"./bezier-rs/docs/interactive-docs",
 	],
 	"eslint.validate": [
 		"javascript",

bezier-rs/docs/interactive-docs/.eslintrc.js

@@ -65,8 +65,7 @@ module.exports = {
 		"no-bitwise": "off",
 		"no-shadow": "off",
 		"no-use-before-define": "off",
-		// TODO: Vetur cannot properly recognize paths using @ which contradicts this rule
-		// "no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
+		"no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
 
 		// TypeScript plugin config
 		"@typescript-eslint/indent": "off",

bezier-rs/docs/interactive-docs/src/App.vue

@@ -2,24 +2,29 @@
 	<div class="App">
 		<h1>Bezier-rs Interactive Documentation</h1>
 		<p>This is the interactive documentation for the <b>bezier-rs</b> library. Click and drag on the endpoints of the example curves to visualize the various Bezier utilities and functions.</p>
-		<ExamplePane />
+		<div v-for="feature in features" :key="feature.id">
+			<ExamplePane :name="feature.name" :callback="feature.callback" />
+		</div>
 		<div id="svg-test" />
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import ExamplePane from "./components/ExamplePane.vue";
+import { drawText, getContextFromCanvas } from "@/utils/drawing";
+import { WasmBezierInstance } from "@/utils/types";
+
+import ExamplePane from "@/components/ExamplePane.vue";
 
 // eslint-disable-next-line
 const testBezierLib = async () => {
-	// TODO: Fix below
-	// eslint seems to think this pkg is the one in the frontend folder, not the one in interactive-docs (which is not what is actually imported)
-	// eslint-disable-next-line
-	import("../wasm/pkg").then((wasm) => {
-		// eslint-disable-next-line
-		const bezier = wasm.WasmBezier.new_quad(0, 0, 50, 0, 100, 100);
+	import("@/../wasm/pkg").then((wasm) => {
+		const bezier = wasm.WasmBezier.new_quad([
+			[0, 0],
+			[50, 0],
+			[100, 100],
+		]);
 		const svgContainer = document.getElementById("svg-test");
 		if (svgContainer) {
 			svgContainer.innerHTML = bezier.to_svg();
@@ -32,6 +37,25 @@ export default defineComponent({
 	components: {
 		ExamplePane,
 	},
+	data() {
+		return {
+			features: [
+				{
+					id: 0,
+					name: "Constructor",
+					// eslint-disable-next-line
+					callback: (): void => {},
+				},
+				{
+					id: 2,
+					name: "Length",
+					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
+						drawText(getContextFromCanvas(canvas), `Length: ${bezier.length().toFixed(2)}`, 5, canvas.height - 7);
+					},
+				},
+			],
+		};
+	},
 });
 </script>
 

bezier-rs/docs/interactive-docs/src/components/BezierDrawing.ts

@@ -1,5 +1,5 @@
-import { drawBezier } from "@/utils/drawing";
-import { Point, WasmBezierMutatorKey } from "@/utils/types";
+import { drawBezier, getContextFromCanvas } from "@/utils/drawing";
+import { BezierCallback, Point, WasmBezierMutatorKey } from "@/utils/types";
 import { WasmBezierInstance } from "@/utils/wasm-comm";
 
 class BezierDrawing {
@@ -15,8 +15,11 @@ class BezierDrawing {
 
 	bezier: WasmBezierInstance;
 
-	constructor(bezier: WasmBezierInstance) {
+	callback: BezierCallback;
+
+	constructor(bezier: WasmBezierInstance, callback: BezierCallback) {
 		this.bezier = bezier;
+		this.callback = callback;
 		this.points = bezier
 			.get_points()
 			.map((p) => JSON.parse(p))
@@ -37,11 +40,7 @@ class BezierDrawing {
 		this.canvas.width = 200;
 		this.canvas.height = 200;
 
-		const ctx = this.canvas.getContext("2d");
-		if (ctx == null) {
-			throw Error("Failed to create context");
-		}
-		this.ctx = ctx;
+		this.ctx = getContextFromCanvas(this.canvas);
 
 		this.dragIndex = null; // Index of the point being moved
 
@@ -100,6 +99,7 @@ class BezierDrawing {
 
 	updateBezier(): void {
 		drawBezier(this.ctx, this.points);
+		this.callback(this.canvas, this.bezier);
 	}
 
 	getCanvas(): HTMLCanvasElement {

bezier-rs/docs/interactive-docs/src/components/Example.vue

@@ -1,16 +1,16 @@
 <template>
 	<div>
-		<h3>{{ title }}</h3>
-		<figure ref="drawing"></figure>
+		<h4 class="example_header">{{ title }}</h4>
+		<figure class="example_figure" ref="drawing"></figure>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { WasmBezierInstance } from "../utils/wasm-comm";
-
-import BezierDrawing from "./BezierDrawing";
+import BezierDrawing from "@/components/BezierDrawing";
+import { BezierCallback } from "@/utils/types";
+import { WasmBezierInstance } from "@/utils/wasm-comm";
 
 export default defineComponent({
 	name: "ExampleComponent",
@@ -20,14 +20,25 @@ export default defineComponent({
 			type: Object as PropType<WasmBezierInstance>,
 			required: true,
 		},
+		callback: {
+			type: Function as PropType<BezierCallback>,
+			required: true,
+		},
 	},
 	mounted() {
-		const bezierDrawing = new BezierDrawing(this.bezier);
+		const bezierDrawing = new BezierDrawing(this.bezier, this.callback);
 		const drawing = this.$refs.drawing as HTMLElement;
 		drawing.appendChild(bezierDrawing.getCanvas());
 		bezierDrawing.updateBezier();
 	},
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.example_header {
+	margin-bottom: 0;
+}
+.example_figure {
+	margin-top: 0.5em;
+}
+</style>

bezier-rs/docs/interactive-docs/src/components/ExamplePane.vue

@@ -1,18 +1,21 @@
 <template>
-	<div class="example_row">
-		<div v-for="example in exampleData" :key="example.id">
-			<Example :title="example.title" :bezier="example.bezier" />
+	<div>
+		<h2 class="example_pane_header">{{ this.name }}</h2>
+		<div class="example_row">
+			<div v-for="example in exampleData" :key="example.id">
+				<Example :title="example.title" :bezier="example.bezier" :callback="callback" />
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import { WasmBezierInstance } from "../utils/wasm-comm";
+import { BezierCallback } from "@/utils/types";
+import { WasmBezierInstance } from "@/utils/wasm-comm";
 
-import Example from "./Example.vue";
-// import wasm from "bezier-rs-wasm";
+import Example from "@/components/Example.vue";
 
 type ExampleData = {
 	id: number;
@@ -25,24 +28,39 @@ export default defineComponent({
 	components: {
 		Example,
 	},
+	props: {
+		name: String,
+		callback: {
+			type: Function as PropType<BezierCallback>,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			exampleData: [] as ExampleData[],
 		};
 	},
 	mounted() {
-		// eslint-disable-next-line
-		import("../../wasm/pkg").then((wasm) => {
+		import("@/../wasm/pkg").then((wasm) => {
 			this.exampleData = [
 				{
 					id: 0,
-					title: "Quadratic Bezier",
-					bezier: wasm.WasmBezier.new_quad(30, 30, 140, 20, 160, 170),
+					title: "Quadratic",
+					bezier: wasm.WasmBezier.new_quad([
+						[30, 30],
+						[140, 20],
+						[160, 170],
+					]),
 				},
 				{
 					id: 1,
-					title: "Cubic Bezier",
-					bezier: wasm.WasmBezier.new_cubic(30, 30, 60, 140, 150, 30, 160, 160),
+					title: "Cubic",
+					bezier: wasm.WasmBezier.new_cubic([
+						[30, 30],
+						[60, 140],
+						[150, 30],
+						[160, 160],
+					]),
 				},
 			];
 		});
@@ -56,4 +74,8 @@ export default defineComponent({
 	flex-direction: row;
 	justify-content: center;
 }
+
+.example_pane_header {
+	margin-bottom: 0;
+}
 </style>

bezier-rs/docs/interactive-docs/src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from "vue";
 
-import App from "./App.vue";
+import App from "@/App.vue";
 
 createApp(App).mount("#app");

bezier-rs/docs/interactive-docs/src/utils/drawing.ts

@@ -1,5 +1,13 @@
 import { Point } from "@/utils/types";
 
+export const getContextFromCanvas = (canvas: HTMLCanvasElement): CanvasRenderingContext2D => {
+	const ctx = canvas.getContext("2d");
+	if (ctx === null) {
+		throw Error("Failed to fetch context");
+	}
+	return ctx;
+};
+
 export const drawLine = (ctx: CanvasRenderingContext2D, p1: Point, p2: Point): void => {
 	ctx.strokeStyle = "grey";
 	ctx.lineWidth = 1;
@@ -25,6 +33,12 @@ export const drawPoint = (ctx: CanvasRenderingContext2D, p: Point): void => {
 	ctx.fill();
 };
 
+export const drawText = (ctx: CanvasRenderingContext2D, text: string, x: number, y: number): void => {
+	ctx.fillStyle = "black";
+	ctx.font = "16px Arial";
+	ctx.fillText(text, x, y);
+};
+
 export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[]): void => {
 	/* Until a bezier representation is finalized, treat the points as follows
 		points[0] = start point

bezier-rs/docs/interactive-docs/src/utils/types.ts

@@ -4,10 +4,12 @@ export type WasmBezierInstance = InstanceType<WasmRawInstance["WasmBezier"]>;
 export type WasmBezierKey = keyof WasmBezierInstance;
 export type WasmBezierMutatorKey = "set_start" | "set_handle1" | "set_handle2" | "set_end";
 
+export type BezierCallback = (canvas: HTMLCanvasElement, bezier: WasmBezierInstance) => void;
+
 export type Point = {
 	x: number;
 	y: number;
 	r: number;
 	mutator: WasmBezierMutatorKey;
-	selected?: boolean;
+	selected: boolean;
 };

bezier-rs/docs/interactive-docs/wasm/src/lib.rs

@@ -16,32 +16,36 @@ pub struct WasmBezier {
 
 #[wasm_bindgen]
 impl WasmBezier {
-	pub fn new_quad(x1: f64, y1: f64, x2: f64, y2: f64, x3: f64, y3: f64) -> WasmBezier {
+	/// Expect js_points to be a list of 3 pairs
+	pub fn new_quad(js_points: &JsValue) -> WasmBezier {
+		let points: [DVec2; 3] = js_points.into_serde().unwrap();
 		WasmBezier {
-			internal: Bezier::from_quadratic_coordinates(x1, y1, x2, y2, x3, y3),
+			internal: Bezier::from_quadratic_dvec2(points[0], points[1], points[2]),
 		}
 	}
 
-	pub fn new_cubic(x1: f64, y1: f64, x2: f64, y2: f64, x3: f64, y3: f64, x4: f64, y4: f64) -> WasmBezier {
+	/// Expect js_points to be a list of 4 pairs
+	pub fn new_cubic(js_points: &JsValue) -> WasmBezier {
+		let points: [DVec2; 4] = js_points.into_serde().unwrap();
 		WasmBezier {
-			internal: Bezier::from_cubic_coordinates(x1, y1, x2, y2, x3, y3, x4, y4),
+			internal: Bezier::from_cubic_dvec2(points[0], points[1], points[2], points[3]),
 		}
 	}
 
 	pub fn set_start(&mut self, x: f64, y: f64) {
-		self.internal.set_start( DVec2::from((x, y)) );
+		self.internal.set_start(DVec2::from((x, y)));
 	}
 
 	pub fn set_end(&mut self, x: f64, y: f64) {
-		self.internal.set_start( DVec2::from((x, y)) );
+		self.internal.set_end(DVec2::from((x, y)));
 	}
 
 	pub fn set_handle1(&mut self, x: f64, y: f64) {
-		self.internal.set_handle1( DVec2::from((x, y)) );
+		self.internal.set_handle1(DVec2::from((x, y)));
 	}
 
 	pub fn set_handle2(&mut self, x: f64, y: f64) {
-		self.internal.set_handle2( DVec2::from((x, y)) );
+		self.internal.set_handle2(DVec2::from((x, y)));
 	}
 
 	pub fn get_points(&self) -> Vec<JsValue> {
@@ -56,4 +60,8 @@ impl WasmBezier {
 	pub fn to_svg(&self) -> String {
 		self.internal.to_svg()
 	}
+
+	pub fn length(&self) -> f64 {
+		self.internal.length()
+	}
 }