Implement functions to create a Bezier that goes through 3 specified points (#687)

* Implement quadratic and cubic from points

* Catch edge cases and integrate `t` slider

* Add 2 sliders for cubic

* Create utils file for bezier-rs and address other PR comments

* Rename variable and remove unnecessary ids

* Update rustdoc comments and rename variables

* Remove unnecessary file and refactor options for drawing beziers

* Address PR comments

* Update quadratic_through_points description

* Add wasm-pack to dependencies and change from spaces to tabs for indents

* Change strut to midpoint_separation, adjust sliders and section name

* Minor refactor

bezier-rs/docs/interactive-docs/package.json

@@ -1,38 +1,41 @@
 {
-  "name": "interactive-docs",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "core-js": "^3.8.3",
-    "vue": "^3.2.13"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-service": "^5.0.4",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/eslint-config-airbnb": "^6.0.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "@wasm-tool/wasm-pack-plugin": "^1.6.0",
-    "eslint": "^8.14.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-prettier-vue": "^3.1.0",
-    "eslint-plugin-vue": "^8.7.1",
-    "typescript": "~4.5.5",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
+	"name": "interactive-docs",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "vue-cli-service build",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"core-js": "^3.8.3",
+		"vue": "^3.2.13"
+	},
+	"devDependencies": {
+		"@typescript-eslint/eslint-plugin": "^5.4.0",
+		"@typescript-eslint/parser": "^5.4.0",
+		"@vue/cli-plugin-eslint": "^5.0.4",
+		"@vue/cli-plugin-typescript": "~5.0.0",
+		"@vue/cli-service": "^5.0.4",
+		"@vue/compiler-sfc": "^3.2.31",
+		"@vue/eslint-config-airbnb": "^6.0.0",
+		"@vue/eslint-config-typescript": "^9.1.0",
+		"@wasm-tool/wasm-pack-plugin": "^1.6.0",
+		"eslint": "^8.14.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-import": "^2.25.4",
+		"eslint-plugin-prettier-vue": "^3.1.0",
+		"eslint-plugin-vue": "^8.7.1",
+		"typescript": "~4.5.5",
+		"vue-template-compiler": "^2.6.14"
+	},
+	"optionalDependencies": {
+		"wasm-pack": "^0.10.3"
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not dead",
+		"not ie 11"
+	]
 }

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

@@ -3,7 +3,14 @@
 		<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>
 		<div v-for="(feature, index) in features" :key="index">
-			<ExamplePane :template="feature.template" :templateOptions="feature.templateOptions" :name="feature.name" :callback="feature.callback" />
+			<ExamplePane
+				:template="feature.template"
+				:templateOptions="feature.templateOptions"
+				:name="feature.name"
+				:callback="feature.callback"
+				:createThroughPoints="feature.createThroughPoints"
+				:cubicOptions="feature.cubicOptions"
+			/>
 		</div>
 		<br />
 		<div id="svg-test" />
@@ -22,7 +29,7 @@ import SliderExample from "@/components/SliderExample.vue";
 // eslint-disable-next-line
 const testBezierLib = async () => {
 	import("@/../wasm/pkg").then((wasm) => {
-		const bezier = wasm.WasmBezier.new_quad([
+		const bezier = wasm.WasmBezier.new_quadratic([
 			[0, 0],
 			[50, 0],
 			[100, 100],
@@ -55,6 +62,42 @@ export default defineComponent({
 					// eslint-disable-next-line
 					callback: (): void => {},
 				},
+				{
+					name: "Bezier through points",
+					// eslint-disable-next-line
+					callback: (): void => {},
+					createThroughPoints: true,
+					template: markRaw(SliderExample),
+					templateOptions: {
+						sliders: [
+							{
+								min: 0.01,
+								max: 0.99,
+								step: 0.01,
+								default: 0.5,
+								variable: "t",
+							},
+						],
+					},
+					cubicOptions: {
+						sliders: [
+							{
+								min: 0.01,
+								max: 0.99,
+								step: 0.01,
+								default: 0.5,
+								variable: "t",
+							},
+							{
+								min: 0,
+								max: 100,
+								step: 5,
+								default: 10,
+								variable: "midpoint separation",
+							},
+						],
+					},
+				},
 				{
 					name: "Length",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
@@ -150,8 +193,8 @@ export default defineComponent({
 						const context = getContextFromCanvas(canvas);
 						const bezierPairPoints = JSON.parse(bezier.split(options.t));
 
-						drawBezier(context, bezierPairPoints[0], null, COLORS.NON_INTERACTIVE.STROKE_2, 3.5);
-						drawBezier(context, bezierPairPoints[1], null, COLORS.NON_INTERACTIVE.STROKE_1, 3.5);
+						drawBezier(context, bezierPairPoints[0], null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_2, radius: 3.5 });
+						drawBezier(context, bezierPairPoints[1], null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
 					},
 					template: markRaw(SliderExample),
 					templateOptions: { sliders: [tSliderOptions] },
@@ -161,7 +204,7 @@ export default defineComponent({
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
 						const context = getContextFromCanvas(canvas);
 						const trimmedBezier = bezier.trim(options.t1, options.t2);
-						drawBezierHelper(context, trimmedBezier, COLORS.NON_INTERACTIVE.STROKE_1, 3.5);
+						drawBezierHelper(context, trimmedBezier, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
 					},
 					template: markRaw(SliderExample),
 					templateOptions: {

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

@@ -1,6 +1,6 @@
-import { drawBezier, getContextFromCanvas, getPointSizeByIndex } from "@/utils/drawing";
-import { BezierCallback, BezierPoint, WasmBezierMutatorKey } from "@/utils/types";
-import { WasmBezierInstance } from "@/utils/wasm-comm";
+import { WasmBezier } from "@/../wasm/pkg";
+import { COLORS, drawBezier, drawPoint, getContextFromCanvas, getPointSizeByIndex } from "@/utils/drawing";
+import { BezierCallback, BezierPoint, BezierStyleConfig, WasmBezierMutatorKey, WasmBezierInstance } from "@/utils/types";
 
 // Offset to increase selectable range, used to make points easier to grab
 const FUDGE_FACTOR = 3;
@@ -22,10 +22,13 @@ class BezierDrawing {
 
 	options: Record<string, number>;
 
-	constructor(bezier: WasmBezierInstance, callback: BezierCallback, options: Record<string, number>) {
+	createThroughPoints: boolean;
+
+	constructor(bezier: WasmBezierInstance, callback: BezierCallback, options: Record<string, number>, createThroughPoints = false) {
 		this.bezier = bezier;
 		this.callback = callback;
 		this.options = options;
+		this.createThroughPoints = createThroughPoints;
 		this.points = bezier
 			.get_points()
 			.map((p) => JSON.parse(p))
@@ -37,6 +40,11 @@ class BezierDrawing {
 				mutator: BezierDrawing.indexToMutator[points.length === 3 && i > 1 ? i + 1 : i],
 			}));
 
+		if (this.createThroughPoints && this.points.length === 4) {
+			// Use the first handler as the middle point
+			this.points = [this.points[0], this.points[1], this.points[3]];
+		}
+
 		const canvas = document.createElement("canvas");
 		if (canvas === null) {
 			throw Error("Failed to create canvas");
@@ -105,7 +113,39 @@ class BezierDrawing {
 			this.options = options;
 		}
 		this.clearFigure();
-		drawBezier(this.ctx, this.points, this.dragIndex);
+
+		// For the create through points cases, we store a bezier where the handle is actually the point that the curve should pass through
+		// This is so that we can re-use the drag and drop logic, while simply drawing the desired bezier instead
+		const actualBezierPointLength = this.bezier.get_points().length;
+		let pointsToDraw = this.points;
+
+		let styleConfig: Partial<BezierStyleConfig> = {
+			handleLineStrokeColor: COLORS.INTERACTIVE.STROKE_2,
+		};
+		let dragIndex = this.dragIndex;
+		if (this.createThroughPoints) {
+			let serializedPoints;
+			const pointList = this.points.map((p) => [p.x, p.y]);
+			if (actualBezierPointLength === 3) {
+				serializedPoints = WasmBezier.quadratic_through_points(pointList, this.options.t);
+			} else {
+				serializedPoints = WasmBezier.cubic_through_points(pointList, this.options.t, this.options["midpoint separation"]);
+			}
+			pointsToDraw = serializedPoints.get_points().map((p) => JSON.parse(p));
+			if (this.dragIndex === 1) {
+				// Do not propagate dragIndex when the the non-endpoint is moved
+				dragIndex = null;
+			} else if (this.dragIndex === 2 && pointsToDraw.length === 4) {
+				// For the cubic case, we want to propagate the drag index when the end point is moved, but need to adjust the index
+				dragIndex = 3;
+			}
+			styleConfig = { handleLineStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, handleStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1 };
+		}
+		drawBezier(this.ctx, pointsToDraw, dragIndex, styleConfig);
+		if (this.createThroughPoints) {
+			// Draw the point that the curve was drawn through
+			drawPoint(this.ctx, this.points[1], getPointSizeByIndex(1, this.points.length), this.dragIndex === 1 ? COLORS.INTERACTIVE.SELECTED : COLORS.INTERACTIVE.STROKE_1);
+		}
 		this.callback(this.canvas, this.bezier, this.options);
 	}
 

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

@@ -9,14 +9,13 @@
 import { defineComponent, PropType } from "vue";
 
 import BezierDrawing from "@/components/BezierDrawing";
-import { BezierCallback } from "@/utils/types";
-import { WasmBezierInstance } from "@/utils/wasm-comm";
+import { BezierCallback, WasmBezierInstance } from "@/utils/types";
 
 export default defineComponent({
 	name: "ExampleComponent",
 	data() {
 		return {
-			bezierDrawing: new BezierDrawing(this.bezier, this.callback, this.options),
+			bezierDrawing: new BezierDrawing(this.bezier, this.callback, this.options, this.createThroughPoints),
 		};
 	},
 	props: {
@@ -33,6 +32,10 @@ export default defineComponent({
 			type: Object as PropType<Record<string, number>>,
 			default: () => ({}),
 		},
+		createThroughPoints: {
+			type: Boolean as PropType<boolean>,
+			default: false,
+		},
 	},
 	mounted() {
 		const drawing = this.$refs.drawing as HTMLElement;

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

@@ -2,8 +2,8 @@
 	<div>
 		<h2 class="example_pane_header">{{ name }}</h2>
 		<div class="example_row">
-			<div v-for="example in exampleData" :key="example.id">
-				<component :is="template" :templateOptions="templateOptions" :title="example.title" :bezier="example.bezier" :callback="callback" />
+			<div v-for="(example, index) in exampleData" :key="index">
+				<component :is="template" :templateOptions="example.templateOptions" :title="example.title" :bezier="example.bezier" :callback="callback" :createThroughPoints="createThroughPoints" />
 			</div>
 		</div>
 	</div>
@@ -12,15 +12,14 @@
 <script lang="ts">
 import { defineComponent, PropType, Component } from "vue";
 
-import { BezierCallback } from "@/utils/types";
-import { WasmBezierInstance } from "@/utils/wasm-comm";
+import { BezierCallback, TemplateOption, WasmBezierInstance, WasmRawInstance } from "@/utils/types";
 
 import Example from "@/components/Example.vue";
 
 type ExampleData = {
-	id: number;
 	title: string;
 	bezier: WasmBezierInstance;
+	templateOptions: TemplateOption;
 };
 
 export default defineComponent({
@@ -38,7 +37,15 @@ export default defineComponent({
 			type: Object as PropType<Component>,
 			default: Example,
 		},
-		templateOptions: Object,
+		templateOptions: Object as PropType<TemplateOption>,
+		cubicOptions: {
+			type: Object as PropType<TemplateOption>,
+			default: null,
+		},
+		createThroughPoints: {
+			type: Boolean as PropType<boolean>,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -46,26 +53,28 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		import("@/../wasm/pkg").then((wasm) => {
+		import("@/../wasm/pkg").then((wasm: WasmRawInstance) => {
+			const quadraticPoints = [
+				[30, 50],
+				[140, 30],
+				[160, 170],
+			];
+			const cubicPoints = [
+				[30, 30],
+				[60, 140],
+				[150, 30],
+				[160, 160],
+			];
 			this.exampleData = [
 				{
-					id: 0,
 					title: "Quadratic",
-					bezier: wasm.WasmBezier.new_quad([
-						[30, 50],
-						[140, 30],
-						[160, 170],
-					]),
+					bezier: wasm.WasmBezier.new_quadratic(quadraticPoints),
+					templateOptions: this.templateOptions as TemplateOption,
 				},
 				{
-					id: 1,
 					title: "Cubic",
-					bezier: wasm.WasmBezier.new_cubic([
-						[30, 30],
-						[60, 140],
-						[150, 30],
-						[160, 160],
-					]),
+					bezier: wasm.WasmBezier.new_cubic(cubicPoints),
+					templateOptions: (this.cubicOptions || this.templateOptions) as TemplateOption,
 				},
 			];
 		});

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

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Example :title="title" :bezier="bezier" :callback="callback" :options="sliderData" />
+		<Example :title="title" :bezier="bezier" :callback="callback" :options="sliderData" :createThroughPoints="createThroughPoints" />
 		<div v-for="(slider, index) in templateOptions.sliders" :key="index">
 			<div class="slider_label">{{ slider.variable }} = {{ sliderData[slider.variable] }}</div>
 			<input class="slider" v-model.number="sliderData[slider.variable]" type="range" :step="slider.step" :min="slider.min" :max="slider.max" />
@@ -11,8 +11,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { BezierCallback, SliderOption } from "@/utils/types";
-import { WasmBezierInstance } from "@/utils/wasm-comm";
+import { BezierCallback, TemplateOption, WasmBezierInstance } from "@/utils/types";
 
 import Example from "@/components/Example.vue";
 
@@ -32,12 +31,16 @@ export default defineComponent({
 			required: true,
 		},
 		templateOptions: {
-			type: Object,
+			type: Object as PropType<TemplateOption>,
 			default: () => ({}),
 		},
+		createThroughPoints: {
+			type: Boolean as PropType<boolean>,
+			default: false,
+		},
 	},
 	data() {
-		const sliders: SliderOption[] = this.templateOptions.sliders;
+		const sliders = this.templateOptions.sliders;
 		return {
 			sliderData: Object.assign({}, ...sliders.map((s) => ({ [s.variable]: s.default }))),
 		};

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

@@ -1,4 +1,4 @@
-import { Point, WasmBezierInstance } from "@/utils/types";
+import { BezierStyleConfig, Point, WasmBezierInstance } from "@/utils/types";
 
 const HANDLE_RADIUS_FACTOR = 2 / 3;
 const DEFAULT_ENDPOINT_RADIUS = 5;
@@ -16,7 +16,9 @@ export const COLORS = {
 	},
 };
 
-export const getPointSizeByIndex = (index: number, numPoints: number, radius = DEFAULT_ENDPOINT_RADIUS): number => (index === 0 || index === numPoints - 1 ? radius : radius * HANDLE_RADIUS_FACTOR);
+export const isIndexFirstOrLast = (index: number, arrayLength: number): boolean => index === 0 || index === arrayLength - 1;
+
+export const getPointSizeByIndex = (index: number, numPoints: number, radius = DEFAULT_ENDPOINT_RADIUS): number => (isIndexFirstOrLast(index, numPoints) ? radius : radius * HANDLE_RADIUS_FACTOR);
 
 export const getContextFromCanvas = (canvas: HTMLCanvasElement): CanvasRenderingContext2D => {
 	const ctx = canvas.getContext("2d");
@@ -57,12 +59,28 @@ export const drawText = (ctx: CanvasRenderingContext2D, text: string, x: number,
 	ctx.fillText(text, x, y);
 };
 
-export const drawBezierHelper = (ctx: CanvasRenderingContext2D, bezier: WasmBezierInstance, strokeColor = COLORS.INTERACTIVE.STROKE_1, radius = DEFAULT_ENDPOINT_RADIUS): void => {
+export const drawBezierHelper = (ctx: CanvasRenderingContext2D, bezier: WasmBezierInstance, bezierStyleConfig: Partial<BezierStyleConfig> = {}): void => {
 	const points = bezier.get_points().map((p: string) => JSON.parse(p));
-	drawBezier(ctx, points, null, strokeColor, radius);
+	drawBezier(ctx, points, null, bezierStyleConfig);
 };
 
-export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragIndex: number | null = null, strokeColor = COLORS.INTERACTIVE.STROKE_1, radius = DEFAULT_ENDPOINT_RADIUS): void => {
+export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragIndex: number | null = null, bezierStyleConfig: Partial<BezierStyleConfig> = {}): void => {
+	const styleConfig: BezierStyleConfig = {
+		curveStrokeColor: COLORS.INTERACTIVE.STROKE_1,
+		handleStrokeColor: COLORS.INTERACTIVE.STROKE_1,
+		handleLineStrokeColor: COLORS.INTERACTIVE.STROKE_1,
+		radius: DEFAULT_ENDPOINT_RADIUS,
+		...bezierStyleConfig,
+	};
+	// if the handle or handle line colors are not specified, use the same colour as the rest of the curve
+	if (bezierStyleConfig.curveStrokeColor) {
+		if (!bezierStyleConfig.handleStrokeColor) {
+			styleConfig.handleStrokeColor = bezierStyleConfig.curveStrokeColor;
+		}
+		if (!bezierStyleConfig.handleLineStrokeColor) {
+			styleConfig.handleLineStrokeColor = bezierStyleConfig.curveStrokeColor;
+		}
+	}
 	// Points passed to drawBezier are interpreted as follows
 	//	points[0] = start point
 	//	points[1] = handle start
@@ -82,7 +100,7 @@ export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragI
 		end = points[2];
 	}
 
-	ctx.strokeStyle = strokeColor;
+	ctx.strokeStyle = styleConfig.curveStrokeColor;
 	ctx.lineWidth = 2;
 
 	ctx.beginPath();
@@ -94,10 +112,11 @@ export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragI
 	}
 	ctx.stroke();
 
-	drawLine(ctx, start, handleStart, strokeColor);
-	drawLine(ctx, end, handleEnd, strokeColor);
+	drawLine(ctx, start, handleStart, styleConfig.handleLineStrokeColor);
+	drawLine(ctx, end, handleEnd, styleConfig.handleLineStrokeColor);
 
 	points.forEach((point, index) => {
-		drawPoint(ctx, point, getPointSizeByIndex(index, points.length, radius), index === dragIndex ? COLORS.INTERACTIVE.SELECTED : strokeColor);
+		const strokeColor = isIndexFirstOrLast(index, points.length) ? styleConfig.curveStrokeColor : styleConfig.handleStrokeColor;
+		drawPoint(ctx, point, getPointSizeByIndex(index, points.length, styleConfig.radius), index === dragIndex ? COLORS.INTERACTIVE.SELECTED : strokeColor);
 	});
 };

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

@@ -14,6 +14,10 @@ export type SliderOption = {
 	variable: string;
 };
 
+export type TemplateOption = {
+	sliders: SliderOption[];
+};
+
 export type Point = {
 	x: number;
 	y: number;
@@ -22,3 +26,10 @@ export type Point = {
 export type BezierPoint = Point & {
 	mutator: WasmBezierMutatorKey;
 };
+
+export type BezierStyleConfig = {
+	curveStrokeColor: string;
+	handleStrokeColor: string;
+	handleLineStrokeColor: string;
+	radius: number;
+};

bezier-rs/docs/interactive-docs/src/utils/wasm-comm.ts

@@ -1,2 +0,0 @@
-export type WasmRawInstance = typeof import("../../wasm/pkg");
-export type WasmBezierInstance = InstanceType<WasmRawInstance["WasmBezier"]>;

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

@@ -22,7 +22,7 @@ pub fn vec_to_point(p: &DVec2) -> JsValue {
 #[wasm_bindgen]
 impl WasmBezier {
 	/// Expect js_points to be a list of 3 pairs
-	pub fn new_quad(js_points: &JsValue) -> WasmBezier {
+	pub fn new_quadratic(js_points: &JsValue) -> WasmBezier {
 		let points: [DVec2; 3] = js_points.into_serde().unwrap();
 		WasmBezier(Bezier::from_quadratic_dvec2(points[0], points[1], points[2]))
 	}
@@ -33,6 +33,16 @@ impl WasmBezier {
 		WasmBezier(Bezier::from_cubic_dvec2(points[0], points[1], points[2], points[3]))
 	}
 
+	pub fn quadratic_through_points(js_points: &JsValue, t: f64) -> WasmBezier {
+		let points: [DVec2; 3] = js_points.into_serde().unwrap();
+		WasmBezier(Bezier::quadratic_through_points(points[0], points[1], points[2], t))
+	}
+
+	pub fn cubic_through_points(js_points: &JsValue, t: f64, midpoint_separation: f64) -> WasmBezier {
+		let points: [DVec2; 3] = js_points.into_serde().unwrap();
+		WasmBezier(Bezier::cubic_through_points(points[0], points[1], points[2], t, midpoint_separation))
+	}
+
 	pub fn set_start(&mut self, x: f64, y: f64) {
 		self.0.set_start(DVec2::new(x, y));
 	}