[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

@@ -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.

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"
+        from="30"
-        to="30"
+        to="0"
         dur="2s"
         repeatCount="indefinite"
       />