From 83ff6b3b4711445f4feb70786d9dee88deee8ee2 Mon Sep 17 00:00:00 2001
From: Jonathan Haas <haasjona@gmail.com>
Date: Sat, 3 May 2025 09:26:41 +0000
Subject: [PATCH] [react] fix: Improve the inspect view (#323)

Improve visuals of the Xray path component

- Return null for hidden paths in the Path component. This fixes #266 and restores v3 behavior here. (An optional toggle to show hidden paths might be useful in the future.)
- Reverse animation direction in stroke-dashoffset. This ensures that the path animates in the internal direction, which is less confusing since you can hover over a path to check that it is counter-clockwise.

Also remove a duplicate array key.

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/323
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>
Co-committed-by: Jonathan Haas <haasjona@gmail.com>
---
 packages/react/components/Editor/lib/ui-preferences.mjs | 1 -
 packages/react/components/Xray/path.mjs                 | 8 ++++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react/components/Editor/lib/ui-preferences.mjs b/packages/react/components/Editor/lib/ui-preferences.mjs
index 06333d7a53b..a25873a02a1 100644
--- a/packages/react/components/Editor/lib/ui-preferences.mjs
+++ b/packages/react/components/Editor/lib/ui-preferences.mjs
@@ -81,7 +81,6 @@ export function menuUiPreferencesStructure() {
     renderer: {
       dense: true,
       title: 'Pattern render engine',
-      about: 'Change the way the pattern is rendered on screen',
       about: (
         <span>
           Change the underlying method for rendering the pattern on screen.
diff --git a/packages/react/components/Xray/path.mjs b/packages/react/components/Xray/path.mjs
index ec0af9e7c60..40f01e69f42 100644
--- a/packages/react/components/Xray/path.mjs
+++ b/packages/react/components/Xray/path.mjs
@@ -24,6 +24,10 @@ export const PathXray = ({
   strings,
   drillProps = {},
 }) => {
+  if (path.hidden) {
+    return null
+  }
+
   /*
    * We use the Path component from Pattern here
    * If we would extract Path from the components passed down,
@@ -76,8 +80,8 @@ export const PathXray = ({
     >
       <animate
         attributeName="stroke-dashoffset"
-        from="0"
-        to="30"
+        from="30"
+        to="0"
         dur="2s"
         repeatCount="indefinite"
       />