Editor client: Property grid - Support any name in vectors

crates/lgn-editor-gui/frontend/src/components/propertyGrid/PropertyBag.svelte

@@ -65,7 +65,7 @@
       {/if}
     </div>
   {/if}
-  {#each property.subProperties as subProperty (subProperty.name)}
+  {#each property.subProperties as subProperty, index (subProperty.name)}
     <PropertyContainer
       on:input
       on:addVectorSubProperty
@@ -76,6 +76,7 @@
       property={subProperty}
       bind:parentProperty={property}
       level={level + 1}
+      {index}
     />
   {/each}
 </div>

crates/lgn-editor-gui/frontend/src/components/propertyGrid/PropertyContainer.svelte

@@ -28,6 +28,9 @@
 
   /** The property path parts */
   export let pathParts: string[];
+
+  /** The property index (only used in vectors) */
+  export let index: number;
 </script>
 
 <div class="root">
@@ -50,6 +53,7 @@
       {property}
       bind:parentProperty
       {pathParts}
+      {index}
     />
   {/if}
 </div>

crates/lgn-editor-gui/frontend/src/components/propertyGrid/PropertyGrid.svelte

@@ -106,7 +106,7 @@
   {:else if !$currentResourceData.properties.length}
     <div class="italic">Resource has no properties</div>
   {:else}
-    {#each $currentResourceData.properties as property (property.name)}
+    {#each $currentResourceData.properties as property, index (property.name)}
       <PropertyContainer
         on:input={onInput}
         on:addVectorSubProperty={addVectorSubProperty}
@@ -115,6 +115,7 @@
           ? []
           : [property.name]}
         {property}
+        {index}
         parentProperty={null}
       />
     {/each}

crates/lgn-editor-gui/frontend/src/components/propertyGrid/PropertyInput.svelte

@@ -2,7 +2,6 @@
   import { PropertyUpdate } from "@/api";
   import {
     BagResourceProperty,
-    extractVecSubPropertyIndex,
     propertyIsBoolean,
     propertyIsColor,
     propertyIsNumber,
@@ -41,6 +40,9 @@
   /** The property path parts */
   export let pathParts: string[];
 
+  /** The property index (only used in vectors) */
+  export let index: number;
+
   function onInput({ value }: Pick<PropertyUpdate, "value">) {
     dispatch("input", {
       name: pathParts.join("."),
@@ -66,19 +68,12 @@
       return;
     }
 
-    const index = extractVecSubPropertyIndex(property.name);
-
-    if (!index) {
-      log.error(
-        `Vector sub property name didn't have the proper format: ${property.name}`
-      );
-
-      return;
-    }
-
     parentProperty.subProperties = parentProperty.subProperties
       .filter(({ name }) => property.name !== name)
-      .map((property, index) => ({ ...property, name: `[${index}]` }));
+      .map((property, index) => ({
+        ...property,
+        name: `[${index}]`,
+      }));
 
     dispatch("removeVectorSubProperty", {
       path: pathParts.slice(0, -1).join("."),
@@ -128,7 +123,7 @@
   {:else if propertyIsVec(property)}
     {property.ptype} not implemented
   {:else if propertyIsOption(property)}
-    <PropertyInputOption on:input {pathParts} {property} />
+    <PropertyInputOption on:input {pathParts} {property} {index} />
   {:else}
     <div class="unknown-property">
       Unknown property: {property.ptype}

crates/lgn-editor-gui/frontend/src/components/propertyGrid/PropertyInputOption.svelte

@@ -20,6 +20,9 @@
   /** The property path parts */
   export let pathParts: string[];
 
+  /** The property index (only used in vectors) */
+  export let index: number;
+
   function setOptionProperty({ detail: isSome }: CustomEvent<boolean>) {
     // TODO: Send an input event that be can sent to the server
 
@@ -54,9 +57,10 @@
   <div class="option-property">
     <PropertyInput
       on:input={(event) => dispatch("input", event.detail)}
-      {pathParts}
       property={property.subProperties[0]}
       parentProperty={property}
+      {pathParts}
+      {index}
     />
     <div class="option-property-checkbox">
       <Checkbox on:change={setOptionProperty} value={true} />

crates/lgn-editor-gui/frontend/src/components/propertyGrid/PropertyUnit.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { PropertyUpdate } from "@/api";
-
   import { BagResourceProperty, ResourceProperty } from "@/lib/propertyGrid";
   import PropertyInput from "./PropertyInput.svelte";
   import { RemoveVectorSubPropertyEvent } from "./types";
@@ -16,6 +15,9 @@
 
   /** The property path parts */
   export let pathParts: string[];
+
+  /** The property index (only used in vectors) */
+  export let index: number;
 </script>
 
 <div class="root">
@@ -31,6 +33,7 @@
         on:removeVectorSubProperty
         pathParts={property.name ? [...pathParts, property.name] : pathParts}
         {property}
+        {index}
         bind:parentProperty
       />
     </div>

crates/lgn-editor-gui/frontend/src/lib/propertyGrid.ts

@@ -1,8 +1,5 @@
 import { ResourceDescription } from "@lgn/proto-editor/dist/resource_browser";
-import {
-  ResourceProperty as RawResourceProperty,
-  ResourcePropertyUpdate,
-} from "@lgn/proto-editor/dist/property_inspector";
+import { ResourceProperty as RawResourceProperty } from "@lgn/proto-editor/dist/property_inspector";
 import { filterMap } from "./array";
 
 /** Matches any `ptype` of format "Vec<subPType>" */
@@ -11,9 +8,6 @@ const vecPTypeRegExp = /^Vec\<(.+)\>$/;
 /** Matches any `ptype` of format "Option<subPType>" */
 const optionPTypeRegExp = /^Option\<(.+)\>$/;
 
-/** Matches any `name` of format "[index]", convenient for vector sub properties */
-const vecSubPropertyNameRegExp = /^\[(\d+)\]$/;
-
 /** Shared by all resource properties, be it a primitive, a vector, an option, or a component */
 type ResourcePropertyBase<Type extends string = string> = {
   ptype: Type;
@@ -277,25 +271,6 @@ export function extractVecPType<
   return ptype;
 }
 
-/**
- * Extract the inner index from a vector sub property `name`:
- *
- * ```typescript
- * extractVecSubPropertyIndex("[0]"); // returns 0
- * extractVecSubPropertyIndex("[x]"); // return null
- * ```
- */
-export function extractVecSubPropertyIndex(name: string): number | null {
-  const index = name.match(vecSubPropertyNameRegExp)?.[1] ?? null;
-
-  if (!index) {
-    return null;
-  }
-
-  // The regexp should already guarantee that the underlying value is a number
-  return +index;
-}
-
 const primitivePTypes: PrimitiveResourceProperty["ptype"][] = [
   "bool",
   "Speed",

crates/lgn-editor-gui/frontend/src/pages/Home.svelte

@@ -18,7 +18,6 @@
   import contextMenu from "@/actions/contextMenu";
   import contextMenuStore from "@/stores/contextMenu";
   import contextMenuEntries from "@/data/contextMenu";
-  import { fakeFileSystemEntries } from "@/data/fake";
 
   contextMenuStore.register("resource", contextMenuEntries);
 
@@ -124,19 +123,6 @@
                   </div>
                 </HierarchyTree>
               {/if}
-              <HierarchyTree entries={fakeFileSystemEntries}>
-                <div
-                  let:itemName
-                  use:contextMenu={{
-                    name: "resource",
-                    payload: { itemName },
-                  }}
-                  class="h-full w-full"
-                  slot="itemName"
-                >
-                  {itemName}
-                </div>
-              </HierarchyTree>
             </div>
           </Panel>
         </div>

crates/lgn-editor-gui/frontend/tests/lib/propertyGrid.test.ts

@@ -5,7 +5,6 @@ import {
   buildVecProperty,
   extractOptionPType,
   extractVecPType,
-  extractVecSubPropertyIndex,
   formatProperties,
   propertyIsBag,
   propertyIsBoolean,
@@ -387,20 +386,6 @@ describe("extractVecPType", () => {
   });
 });
 
-describe("extractVecSubPropertyIndex", () => {
-  it("Extracts and return the inner index for Vector sub property", () => {
-    expect(extractVecSubPropertyIndex("[2]")).toBe(2);
-  });
-
-  it("Returns `null` when the name contains non numeric characters", () => {
-    expect(extractVecSubPropertyIndex("[a]")).toBe(null);
-  });
-
-  it("Returns `null` when the name is invalid", () => {
-    expect(extractVecSubPropertyIndex("2")).toBe(null);
-  });
-});
-
 describe("ptypeBelongsToPrimitive", () => {
   it("Returns `true` when the `ptype` === `bool`", () => {
     expect(ptypeBelongsToPrimitive("bool")).toBe(true);