SVGPathElement.cpp 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. /*
  2. * Copyright (c) 2020, Matthew Olsson <mattco@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/Debug.h>
  7. #include <AK/Optional.h>
  8. #include <LibGfx/DeprecatedPath.h>
  9. #include <LibGfx/Path.h>
  10. #include <LibWeb/Bindings/SVGPathElementPrototype.h>
  11. #include <LibWeb/DOM/Document.h>
  12. #include <LibWeb/DOM/Event.h>
  13. #include <LibWeb/Layout/SVGGeometryBox.h>
  14. #include <LibWeb/SVG/SVGPathElement.h>
  15. namespace Web::SVG {
  16. JS_DEFINE_ALLOCATOR(SVGPathElement);
  17. [[maybe_unused]] static void print_instruction(PathInstruction const& instruction)
  18. {
  19. VERIFY(PATH_DEBUG);
  20. auto& data = instruction.data;
  21. switch (instruction.type) {
  22. case PathInstructionType::Move:
  23. dbgln("Move (absolute={})", instruction.absolute);
  24. for (size_t i = 0; i < data.size(); i += 2)
  25. dbgln(" x={}, y={}", data[i], data[i + 1]);
  26. break;
  27. case PathInstructionType::ClosePath:
  28. dbgln("ClosePath (absolute={})", instruction.absolute);
  29. break;
  30. case PathInstructionType::Line:
  31. dbgln("Line (absolute={})", instruction.absolute);
  32. for (size_t i = 0; i < data.size(); i += 2)
  33. dbgln(" x={}, y={}", data[i], data[i + 1]);
  34. break;
  35. case PathInstructionType::HorizontalLine:
  36. dbgln("HorizontalLine (absolute={})", instruction.absolute);
  37. for (size_t i = 0; i < data.size(); ++i)
  38. dbgln(" x={}", data[i]);
  39. break;
  40. case PathInstructionType::VerticalLine:
  41. dbgln("VerticalLine (absolute={})", instruction.absolute);
  42. for (size_t i = 0; i < data.size(); ++i)
  43. dbgln(" y={}", data[i]);
  44. break;
  45. case PathInstructionType::Curve:
  46. dbgln("Curve (absolute={})", instruction.absolute);
  47. for (size_t i = 0; i < data.size(); i += 6)
  48. dbgln(" (x1={}, y1={}, x2={}, y2={}), (x={}, y={})", data[i], data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5]);
  49. break;
  50. case PathInstructionType::SmoothCurve:
  51. dbgln("SmoothCurve (absolute={})", instruction.absolute);
  52. for (size_t i = 0; i < data.size(); i += 4)
  53. dbgln(" (x2={}, y2={}), (x={}, y={})", data[i], data[i + 1], data[i + 2], data[i + 3]);
  54. break;
  55. case PathInstructionType::QuadraticBezierCurve:
  56. dbgln("QuadraticBezierCurve (absolute={})", instruction.absolute);
  57. for (size_t i = 0; i < data.size(); i += 4)
  58. dbgln(" (x1={}, y1={}), (x={}, y={})", data[i], data[i + 1], data[i + 2], data[i + 3]);
  59. break;
  60. case PathInstructionType::SmoothQuadraticBezierCurve:
  61. dbgln("SmoothQuadraticBezierCurve (absolute={})", instruction.absolute);
  62. for (size_t i = 0; i < data.size(); i += 2)
  63. dbgln(" x={}, y={}", data[i], data[i + 1]);
  64. break;
  65. case PathInstructionType::EllipticalArc:
  66. dbgln("EllipticalArc (absolute={})", instruction.absolute);
  67. for (size_t i = 0; i < data.size(); i += 7)
  68. dbgln(" (rx={}, ry={}) x-axis-rotation={}, large-arc-flag={}, sweep-flag={}, (x={}, y={})",
  69. data[i],
  70. data[i + 1],
  71. data[i + 2],
  72. data[i + 3],
  73. data[i + 4],
  74. data[i + 5],
  75. data[i + 6]);
  76. break;
  77. case PathInstructionType::Invalid:
  78. dbgln("Invalid");
  79. break;
  80. }
  81. }
  82. SVGPathElement::SVGPathElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  83. : SVGGeometryElement(document, move(qualified_name))
  84. {
  85. }
  86. void SVGPathElement::initialize(JS::Realm& realm)
  87. {
  88. Base::initialize(realm);
  89. WEB_SET_PROTOTYPE_FOR_INTERFACE(SVGPathElement);
  90. }
  91. void SVGPathElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value)
  92. {
  93. SVGGeometryElement::attribute_changed(name, old_value, value);
  94. if (name == "d")
  95. m_instructions = AttributeParser::parse_path_data(value.value_or(String {}));
  96. }
  97. template<typename PathType>
  98. PathType path_from_path_instructions(ReadonlySpan<PathInstruction> instructions)
  99. {
  100. PathType path;
  101. Optional<Gfx::FloatPoint> previous_control_point;
  102. PathInstructionType last_instruction = PathInstructionType::Invalid;
  103. for (auto& instruction : instructions) {
  104. // If the first path element uses relative coordinates, we treat them as absolute by making them relative to (0, 0).
  105. auto last_point = path.last_point();
  106. auto& absolute = instruction.absolute;
  107. auto& data = instruction.data;
  108. if constexpr (PATH_DEBUG) {
  109. print_instruction(instruction);
  110. }
  111. bool clear_last_control_point = true;
  112. switch (instruction.type) {
  113. case PathInstructionType::Move: {
  114. Gfx::FloatPoint point = { data[0], data[1] };
  115. if (absolute) {
  116. path.move_to(point);
  117. } else {
  118. path.move_to(point + last_point);
  119. }
  120. break;
  121. }
  122. case PathInstructionType::ClosePath:
  123. path.close();
  124. break;
  125. case PathInstructionType::Line: {
  126. Gfx::FloatPoint point = { data[0], data[1] };
  127. if (absolute) {
  128. path.line_to(point);
  129. } else {
  130. path.line_to(point + last_point);
  131. }
  132. break;
  133. }
  134. case PathInstructionType::HorizontalLine: {
  135. if (absolute)
  136. path.line_to(Gfx::FloatPoint { data[0], last_point.y() });
  137. else
  138. path.line_to(Gfx::FloatPoint { data[0] + last_point.x(), last_point.y() });
  139. break;
  140. }
  141. case PathInstructionType::VerticalLine: {
  142. if (absolute)
  143. path.line_to(Gfx::FloatPoint { last_point.x(), data[0] });
  144. else
  145. path.line_to(Gfx::FloatPoint { last_point.x(), data[0] + last_point.y() });
  146. break;
  147. }
  148. case PathInstructionType::EllipticalArc: {
  149. double rx = data[0];
  150. double ry = data[1];
  151. double x_axis_rotation = AK::to_radians(static_cast<double>(data[2]));
  152. double large_arc_flag = data[3];
  153. double sweep_flag = data[4];
  154. Gfx::FloatPoint next_point;
  155. if (absolute)
  156. next_point = { data[5], data[6] };
  157. else
  158. next_point = { data[5] + last_point.x(), data[6] + last_point.y() };
  159. path.elliptical_arc_to(next_point, { rx, ry }, x_axis_rotation, large_arc_flag != 0, sweep_flag != 0);
  160. break;
  161. }
  162. case PathInstructionType::QuadraticBezierCurve: {
  163. clear_last_control_point = false;
  164. Gfx::FloatPoint through = { data[0], data[1] };
  165. Gfx::FloatPoint point = { data[2], data[3] };
  166. if (absolute) {
  167. path.quadratic_bezier_curve_to(through, point);
  168. previous_control_point = through;
  169. } else {
  170. auto control_point = through + last_point;
  171. path.quadratic_bezier_curve_to(control_point, point + last_point);
  172. previous_control_point = control_point;
  173. }
  174. break;
  175. }
  176. case PathInstructionType::SmoothQuadraticBezierCurve: {
  177. clear_last_control_point = false;
  178. if (!previous_control_point.has_value()
  179. || ((last_instruction != PathInstructionType::QuadraticBezierCurve) && (last_instruction != PathInstructionType::SmoothQuadraticBezierCurve))) {
  180. previous_control_point = last_point;
  181. }
  182. auto dx_end_control = last_point.dx_relative_to(previous_control_point.value());
  183. auto dy_end_control = last_point.dy_relative_to(previous_control_point.value());
  184. auto control_point = Gfx::FloatPoint { last_point.x() + dx_end_control, last_point.y() + dy_end_control };
  185. Gfx::FloatPoint end_point = { data[0], data[1] };
  186. if (absolute) {
  187. path.quadratic_bezier_curve_to(control_point, end_point);
  188. } else {
  189. path.quadratic_bezier_curve_to(control_point, end_point + last_point);
  190. }
  191. previous_control_point = control_point;
  192. break;
  193. }
  194. case PathInstructionType::Curve: {
  195. clear_last_control_point = false;
  196. Gfx::FloatPoint c1 = { data[0], data[1] };
  197. Gfx::FloatPoint c2 = { data[2], data[3] };
  198. Gfx::FloatPoint p2 = { data[4], data[5] };
  199. if (!absolute) {
  200. p2 += last_point;
  201. c1 += last_point;
  202. c2 += last_point;
  203. }
  204. path.cubic_bezier_curve_to(c1, c2, p2);
  205. previous_control_point = c2;
  206. break;
  207. }
  208. case PathInstructionType::SmoothCurve: {
  209. clear_last_control_point = false;
  210. if (!previous_control_point.has_value()
  211. || ((last_instruction != PathInstructionType::Curve) && (last_instruction != PathInstructionType::SmoothCurve))) {
  212. previous_control_point = last_point;
  213. }
  214. // 9.5.2. Reflected control points https://svgwg.org/svg2-draft/paths.html#ReflectedControlPoints
  215. // If the current point is (curx, cury) and the final control point of the previous path segment is (oldx2, oldy2),
  216. // then the reflected point (i.e., (newx1, newy1), the first control point of the current path segment) is:
  217. // (newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury))
  218. auto reflected_previous_control_x = last_point.x() - previous_control_point.value().dx_relative_to(last_point);
  219. auto reflected_previous_control_y = last_point.y() - previous_control_point.value().dy_relative_to(last_point);
  220. Gfx::FloatPoint c1 = Gfx::FloatPoint { reflected_previous_control_x, reflected_previous_control_y };
  221. Gfx::FloatPoint c2 = { data[0], data[1] };
  222. Gfx::FloatPoint p2 = { data[2], data[3] };
  223. if (!absolute) {
  224. p2 += last_point;
  225. c2 += last_point;
  226. }
  227. path.cubic_bezier_curve_to(c1, c2, p2);
  228. previous_control_point = c2;
  229. break;
  230. }
  231. case PathInstructionType::Invalid:
  232. VERIFY_NOT_REACHED();
  233. }
  234. if (clear_last_control_point) {
  235. previous_control_point = Gfx::FloatPoint {};
  236. }
  237. last_instruction = instruction.type;
  238. }
  239. return path;
  240. }
  241. Gfx::Path path_from_path_instructions(ReadonlySpan<PathInstruction> instructions)
  242. {
  243. return path_from_path_instructions<Gfx::Path>(instructions);
  244. }
  245. Gfx::DeprecatedPath deprecated_path_from_path_instructions(ReadonlySpan<PathInstruction> instructions)
  246. {
  247. return path_from_path_instructions<Gfx::DeprecatedPath>(instructions);
  248. }
  249. Gfx::DeprecatedPath SVGPathElement::get_path(CSSPixelSize)
  250. {
  251. return deprecated_path_from_path_instructions(m_instructions);
  252. }
  253. }