Bezier-rs: Add a pivot point to the 'rotate' function (#792)

* Add function to rotate around a point

* Update svg

* Improve rotation line-to-center styling

* Add second angle of lines

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

libraries/bezier-rs/src/bezier/transform.rs

@@ -90,6 +90,12 @@ impl Bezier {
 		self.apply_transformation(&|point| rotation_matrix.mul_vec2(point))
 	}
 
+	/// Returns a Bezier curve that results from rotating the curve around the provided point by the given angle (in radians).
+	pub fn rotate_about_point(&self, angle: f64, pivot: DVec2) -> Bezier {
+		let rotation_matrix = DMat2::from_angle(angle);
+		self.apply_transformation(&|point| rotation_matrix.mul_vec2(point - pivot) + pivot)
+	}
+
 	/// Returns a Bezier curve that results from translating the curve by the given `DVec2`.
 	pub fn translate(&self, translation: DVec2) -> Bezier {
 		self.apply_transformation(&|point| point + translation)

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

@@ -409,7 +409,7 @@ export default defineComponent({
 				},
 				{
 					name: "Rotate",
-					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.rotate(options.angle * Math.PI),
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.rotate(options.angle * Math.PI, 100, 100),
 					exampleOptions: {
 						[BezierCurveType.Quadratic]: {
 							sliderOptions: [

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

@@ -380,10 +380,9 @@ impl WasmBezier {
 		wrap_svg_tag(content)
 	}
 
-	// TODO: add support for rotating around point
+	pub fn rotate(&self, angle: f64, pivot_x: f64, pivot_y: f64) -> String {
-	pub fn rotate(&self, angle: f64) -> String {
 		let original_bezier_svg = self.get_bezier_path();
-		let rotated_bezier = self.0.rotate(angle);
+		let rotated_bezier = self.0.rotate_about_point(angle, DVec2::new(pivot_x, pivot_y));
 		let empty_string = String::new();
 		let mut rotated_bezier_svg = String::new();
 		rotated_bezier.to_svg(
@@ -391,9 +390,37 @@ impl WasmBezier {
 			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
 			empty_string.clone(),
 			empty_string.clone(),
-			empty_string.clone(),
+			empty_string,
 		);
-		wrap_svg_tag(format!("{original_bezier_svg}{rotated_bezier_svg}"))
+		let pivot = draw_circle(pivot_x, pivot_y, 3., GRAY, 1.5, WHITE);
+
+		// Line between pivot and start point on curve
+		let original_dashed_line_start = format!(
+			r#"<line x1="{pivot_x}" y1="{pivot_y}" x2="{}" y2="{}" stroke="{ORANGE}" stroke-dasharray="0, 4" stroke-width="2" stroke-linecap="round"/>"#,
+			self.0.start().x,
+			self.0.start().y
+		);
+		let rotated_dashed_line_start = format!(
+			r#"<line x1="{pivot_x}" y1="{pivot_y}" x2="{}" y2="{}" stroke="{ORANGE}" stroke-dasharray="0, 4" stroke-width="2" stroke-linecap="round"/>"#,
+			rotated_bezier.start().x,
+			rotated_bezier.start().y
+		);
+
+		// Line between pivot and end point on curve
+		let original_dashed_line_end = format!(
+			r#"<line x1="{pivot_x}" y1="{pivot_y}" x2="{}" y2="{}" stroke="{PINK}" stroke-dasharray="0, 4" stroke-width="2" stroke-linecap="round"/>"#,
+			self.0.end().x,
+			self.0.end().y
+		);
+		let rotated_dashed_line_end = format!(
+			r#"<line x1="{pivot_x}" y1="{pivot_y}" x2="{}" y2="{}" stroke="{PINK}" stroke-dasharray="0, 4" stroke-width="2" stroke-linecap="round"/>"#,
+			rotated_bezier.end().x,
+			rotated_bezier.end().y
+		);
+
+		wrap_svg_tag(format!(
+			"{original_bezier_svg}{rotated_bezier_svg}{pivot}{original_dashed_line_start}{rotated_dashed_line_start}{original_dashed_line_end}{rotated_dashed_line_end}"
+		))
 	}
 
 	fn intersect(&self, curve: &Bezier, error: Option<f64>) -> Vec<f64> {

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

@@ -8,6 +8,7 @@ pub const WHITE: &str = "white";
 pub const GRAY: &str = "gray";
 pub const RED: &str = "red";
 pub const ORANGE: &str = "orange";
+pub const PINK: &str = "pink";
 pub const GREEN: &str = "green";
 pub const NONE: &str = "none";