From 46a4041cc7c98ba0562cb030aa2500e57a9c46f1 Mon Sep 17 00:00:00 2001
From: Jakob Guddas <github@jguddas.de>
Date: Thu, 28 Dec 2023 14:29:46 +0100
Subject: [PATCH] improved SvgPreview radii highlighting (#1747)

* improved SvgPreview radii highlighting

* Update index.tsx

* Update index.tsx

* Update index.tsx

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
---
 docs/.vitepress/lib/SvgPreview/index.tsx | 46 +++++++++++++++++-------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/docs/.vitepress/lib/SvgPreview/index.tsx b/docs/.vitepress/lib/SvgPreview/index.tsx
index 8dfe3c9d6..f14523e6e 100644
--- a/docs/.vitepress/lib/SvgPreview/index.tsx
+++ b/docs/.vitepress/lib/SvgPreview/index.tsx
@@ -183,18 +183,40 @@ const Radii = ({
 >) => {
   return (
     <g className="svg-preview-radii-group" {...props}>
-      {paths
-        .filter(({ circle }) => circle)
-        .map(({ c, prev, next, circle: { x, y, r } }) =>
-          c.name === 'circle' ? (
-            <path d={`M${x} ${y}h.01`} />
-          ) : (
-            <>
-              <path d={`M${prev.x} ${prev.y} ${x} ${y} ${next.x} ${next.y}`} />
-              <circle cy={y} cx={x} r={r} />
-            </>
-          )
-        )}
+      {paths.map(
+        ({ c, prev, next, circle }, i) =>
+          circle && (
+            <React.Fragment key={i}>
+              {c.name !== "circle" && (
+                <path
+                  d={`M${prev.x} ${prev.y} ${circle.x} ${circle.y} ${next.x} ${next.y}`}
+                />
+              )}
+              <circle
+                cy={circle.y}
+                cx={circle.x}
+                r={0.25}
+                strokeDasharray="0"
+                stroke={
+                  (Math.round(circle.x * 100) / 100) % 1 !== 0 ||
+                  (Math.round(circle.y * 100) / 100) % 1 !== 0
+                    ? "red"
+                    : undefined
+                }
+              />
+              <circle
+                cy={circle.y}
+                cx={circle.x}
+                r={circle.r}
+                stroke={
+                  (Math.round(circle.r * 1000) / 1000) % 1 !== 0
+                    ? "red"
+                    : undefined
+                }
+              />
+            </React.Fragment>
+          ),
+      )}
     </g>
   );
 };