Bezier-rs: Convert intersection functions to SVG (#791)

* Break handle of path being drawn by placing anchor on previous anchor with Pen tool (#814)

* Break path by placing anchor on previous one

* Fix offset on click without dragging

* Fix bug where ids reassigned from saved document

* Fix stuck overlay

Co-authored-by: Keavon Chambers <keavon@keavon.com>

* convert intersection functions to svg

* fixed nits

Co-authored-by: 0HyperCube <78500760+0HyperCube@users.noreply.github.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>

website/other/bezier-rs-demos/src/App.vue

@@ -27,7 +27,7 @@
 import { defineComponent, markRaw } from "vue";
 
 import { WasmBezier } from "@/../wasm/pkg";
-import { drawBezier, drawCircleSector, drawCurve, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing";
+import { drawBezier, drawCircleSector, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing";
 import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
 
 import BezierExamplePane from "@/components/BezierExamplePane.vue";
@@ -43,6 +43,14 @@ const tSliderOptions = {
 	variable: "t",
 };
 
+const tErrorOptions = {
+	variable: "error",
+	min: 0.1,
+	max: 2,
+	step: 0.1,
+	default: 0.5,
+};
+
 export default defineComponent({
 	data() {
 		return {
@@ -288,6 +296,66 @@ export default defineComponent({
 						},
 					},
 				},
+				{
+					name: "Intersect (Line Segment)",
+					callback: (bezier: WasmBezierInstance): string => {
+						const line = [
+							[150, 150],
+							[20, 20],
+						];
+						return bezier.intersect_line_segment(line);
+					},
+				},
+				{
+					name: "Intersect (Quadratic)",
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
+						const quadratic = [
+							[20, 80],
+							[180, 10],
+							[90, 120],
+						];
+						return bezier.intersect_quadratic_segment(quadratic, options.error);
+					},
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [tErrorOptions],
+						},
+					},
+				},
+				{
+					name: "Intersect (Cubic)",
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
+						const cubic = [
+							[40, 20],
+							[100, 40],
+							[40, 120],
+							[175, 140],
+						];
+						return bezier.intersect_cubic_segment(cubic, options.error);
+					},
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [tErrorOptions],
+						},
+					},
+				},
+				{
+					name: "Intersect (Self)",
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.intersect_self(options.error),
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [tErrorOptions],
+						},
+						[BezierCurveType.Cubic]: {
+							customPoints: [
+								[160, 180],
+								[170, 10],
+								[30, 90],
+								[180, 140],
+							],
+						},
+					},
+				},
 			],
 			features: [
 				{
@@ -334,116 +402,6 @@ export default defineComponent({
 						],
 					},
 				},
-				{
-					name: "Intersect (Line Segment)",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
-						const context = getContextFromCanvas(canvas);
-						const line = [
-							{ x: 150, y: 150 },
-							{ x: 20, y: 20 },
-						];
-						const mappedLine = line.map((p) => [p.x, p.y]);
-						drawLine(context, line[0], line[1], COLORS.NON_INTERACTIVE.STROKE_1);
-						const intersections: Float64Array = bezier.intersect_line_segment(mappedLine);
-						intersections.forEach((t: number) => {
-							const p = JSON.parse(bezier.evaluate_value(t));
-							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
-						});
-					},
-				},
-				{
-					name: "Intersect (Quadratic Segment)",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const context = getContextFromCanvas(canvas);
-						const points = [
-							{ x: 20, y: 80 },
-							{ x: 180, y: 10 },
-							{ x: 90, y: 120 },
-						];
-						const mappedPoints = points.map((p) => [p.x, p.y]);
-						drawCurve(context, points, COLORS.NON_INTERACTIVE.STROKE_1, 1);
-						const intersections: Float64Array = bezier.intersect_quadratic_segment(mappedPoints, options.error);
-						intersections.forEach((t: number) => {
-							const p = JSON.parse(bezier.evaluate_value(t));
-							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
-						});
-					},
-					template: markRaw(SliderExample),
-					templateOptions: {
-						sliders: [
-							{
-								variable: "error",
-								min: 0.1,
-								max: 2,
-								step: 0.1,
-								default: 0.5,
-							},
-						],
-					},
-				},
-				{
-					name: "Intersect (Cubic Segment)",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const context = getContextFromCanvas(canvas);
-						const points = [
-							{ x: 40, y: 20 },
-							{ x: 100, y: 40 },
-							{ x: 40, y: 120 },
-							{ x: 175, y: 140 },
-						];
-						const mappedPoints = points.map((p) => [p.x, p.y]);
-						drawCurve(context, points, COLORS.NON_INTERACTIVE.STROKE_1, 1);
-						const intersections: Float64Array = bezier.intersect_cubic_segment(mappedPoints, options.error);
-						intersections.forEach((t: number) => {
-							const p = JSON.parse(bezier.evaluate_value(t));
-							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
-						});
-					},
-					template: markRaw(SliderExample),
-					templateOptions: {
-						sliders: [
-							{
-								variable: "error",
-								min: 0.1,
-								max: 2,
-								step: 0.1,
-								default: 0.5,
-							},
-						],
-					},
-				},
-				{
-					name: "Intersect (Self)",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const context = getContextFromCanvas(canvas);
-						const intersections: number[][] = JSON.parse(bezier.intersect_self(options.error));
-						intersections.forEach((tValues: number[]) => {
-							const p = JSON.parse(bezier.evaluate_value(tValues[0]));
-							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
-						});
-					},
-					template: markRaw(SliderExample),
-					templateOptions: {
-						sliders: [
-							{
-								variable: "error",
-								min: 0.01,
-								max: 1,
-								step: 0.05,
-								default: 0.5,
-							},
-						],
-					},
-					customPoints: {
-						[BezierCurveType.Cubic]: [
-							[160, 180],
-							[170, 10],
-							[30, 90],
-							[180, 140],
-						],
-					},
-					curveDegrees: new Set([BezierCurveType.Cubic]),
-				},
 				{
 					name: "Arcs",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {

website/other/bezier-rs-demos/wasm/src/bezier.rs

@@ -372,28 +372,102 @@ impl WasmBezier {
 		self.0.intersections(curve, error)
 	}
 
-	pub fn intersect_line_segment(&self, js_points: &JsValue) -> Vec<f64> {
+	pub fn intersect_line_segment(&self, js_points: &JsValue) -> String {
 		let points: [DVec2; 2] = js_points.into_serde().unwrap();
 		let line = Bezier::from_linear_dvec2(points[0], points[1]);
-		self.intersect(&line, None)
+
+		let bezier_curve_svg = self.get_bezier_path();
+
+		let empty_string = String::new();
+		let mut line_svg = String::new();
+		line.to_svg(
+			&mut line_svg,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			empty_string.clone(),
+			empty_string.clone(),
+			empty_string,
+		);
+
+		let intersections_svg = self
+			.intersect(&line, None)
+			.iter()
+			.map(|intersection_t| {
+				let point = &self.0.evaluate(*intersection_t);
+				draw_circle(point.x, point.y, 4., RED, 1.5, WHITE)
+			})
+			.fold(String::new(), |acc, item| format!("{acc}{item}"));
+		wrap_svg_tag(format!("{bezier_curve_svg}{line_svg}{intersections_svg}"))
 	}
 
-	pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64) -> Vec<f64> {
+	pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64) -> String {
 		let points: [DVec2; 3] = js_points.into_serde().unwrap();
 		let quadratic = Bezier::from_quadratic_dvec2(points[0], points[1], points[2]);
-		self.intersect(&quadratic, Some(error))
+
+		let bezier_curve_svg = self.get_bezier_path();
+
+		let empty_string = String::new();
+		let mut quadratic_svg = String::new();
+		quadratic.to_svg(
+			&mut quadratic_svg,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			empty_string.clone(),
+			empty_string.clone(),
+			empty_string,
+		);
+
+		let intersections_svg = self
+			.intersect(&quadratic, Some(error))
+			.iter()
+			.map(|intersection_t| {
+				let point = &self.0.evaluate(*intersection_t);
+				draw_circle(point.x, point.y, 4., RED, 1.5, WHITE)
+			})
+			.fold(String::new(), |acc, item| format!("{acc}{item}"));
+		wrap_svg_tag(format!("{bezier_curve_svg}{quadratic_svg}{intersections_svg}"))
 	}
 
-	pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: f64) -> Vec<f64> {
+	pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: f64) -> String {
 		let points: [DVec2; 4] = js_points.into_serde().unwrap();
 		let cubic = Bezier::from_cubic_dvec2(points[0], points[1], points[2], points[3]);
-		self.intersect(&cubic, Some(error))
+
+		let bezier_curve_svg = self.get_bezier_path();
+
+		let empty_string = String::new();
+		let mut cubic_svg = String::new();
+		cubic.to_svg(
+			&mut cubic_svg,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			empty_string.clone(),
+			empty_string.clone(),
+			empty_string,
+		);
+
+		let intersections_svg = self
+			.intersect(&cubic, Some(error))
+			.iter()
+			.map(|intersection_t| {
+				let point = &self.0.evaluate(*intersection_t);
+				draw_circle(point.x, point.y, 4., RED, 1.5, WHITE)
+			})
+			.fold(String::new(), |acc, item| format!("{acc}{item}"));
+
+		wrap_svg_tag(format!("{bezier_curve_svg}{cubic_svg}{intersections_svg}"))
 	}
 
 	/// The wrapped return type is `Vec<[f64; 2]>`.
-	pub fn intersect_self(&self, error: f64) -> JsValue {
+	pub fn intersect_self(&self, error: f64) -> String {
-		let points: Vec<[f64; 2]> = self.0.self_intersections(Some(error));
+		let bezier_curve_svg = self.get_bezier_path();
-		to_js_value(points)
+		let intersect_self_svg = self
+			.0
+			.self_intersections(Some(error))
+			.iter()
+			.map(|intersection_t| {
+				let point = &self.0.evaluate(intersection_t[0]);
+				draw_circle(point.x, point.y, 4., RED, 1.5, WHITE)
+			})
+			.fold(bezier_curve_svg, |acc, item| format!("{acc}{item}"));
+
+		wrap_svg_tag(intersect_self_svg)
 	}
 
 	pub fn reduce(&self) -> String {