Fix groups with same name in same object

Author: ulysse-bouchet-simvia

src/WebviewVisu.ts

@@ -150,10 +150,10 @@ export class WebviewVisu implements vscode.Disposable {
     }
 
     // Parse the text to find group names
-    // Group keys are like "all_mesh.obj::SURFACE_1"; match against the short name only
+    // Group keys are like "all_mesh.obj::SURFACE_1::type"; match against the short name only
     const readGroups =
       this.groups?.filter((groupName) => {
-        const shortName = groupName.includes('::') ? groupName.split('::').pop()! : groupName;
+        const shortName = groupName.includes('::') ? groupName.split('::')[2]! : groupName;
         const regex = new RegExp(`\\b${shortName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`);
         return regex.test(text);
       }) || [];

webviews/viewer/src/components/GroupButton.svelte

@@ -14,7 +14,9 @@
     isFace: boolean;
   } = $props();
 
-  let highlight = $derived($highlightedGroups.get(`${objectKey}::${groupName}`));
+  let highlight = $derived(
+    $highlightedGroups.get(`${objectKey}::${groupName}::${isFace ? 'face' : 'node'}`)
+  );
   let isHidden = $derived($sidebarHiddenGroups.get(objectKey)?.has(groupName) ?? false);
 
   let bgStyle = $derived(
@@ -23,7 +25,9 @@
   let colorStyle = $derived(highlight ? 'var(--ui-highlight-text)' : 'var(--ui-text-primary)');
 
   function handleClick() {
-    VisibilityManager.Instance.setVisibility(`${objectKey}::${groupName}`);
+    VisibilityManager.Instance.setVisibility(
+      `${objectKey}::${groupName}::${isFace ? 'face' : 'node'}`
+    );
   }
 </script>
 

webviews/viewer/src/lib/data/CreateGroups.ts

@@ -69,7 +69,7 @@ export class CreateGroups {
       const size = this.computeSize(actor);
 
       for (const faceGroup of groupHierarchy[fileGroup].faces) {
-        const faceGroupId = faceGroups.indexOf(`${fileGroup}::${faceGroup}`);
+        const faceGroupId = faceGroups.indexOf(`${fileGroup}::${faceGroup}::face`);
         const {
           actor: faceActor,
           colorIndex: faceColorIndex,
@@ -86,11 +86,11 @@ export class CreateGroups {
           faceIsObj,
           faceCellCount
         );
-        this.groups[`${fileGroup}::${faceGroup}`] = subGroup;
+        this.groups[`${fileGroup}::${faceGroup}::face`] = subGroup;
       }
 
       for (const nodeGroup of groupHierarchy[fileGroup].nodes) {
-        const nodeGroupId = nodeGroups.indexOf(`${fileGroup}::${nodeGroup}`);
+        const nodeGroupId = nodeGroups.indexOf(`${fileGroup}::${nodeGroup}::node`);
         const { actor: nodeActor, colorIndex: nodeColorIndex } =
           nodeActorCreator.create(nodeGroupId);
         const subGroup = new Group(
@@ -102,7 +102,7 @@ export class CreateGroups {
           nodeColorIndex,
           false
         );
-        this.groups[`${fileGroup}::${nodeGroup}`] = subGroup;
+        this.groups[`${fileGroup}::${nodeGroup}::node`] = subGroup;
       }
     }
 

webviews/viewer/src/lib/data/ObjLoader.ts

@@ -63,15 +63,15 @@ export class ObjLoader {
             case 'g': {
               groupId++;
               const faceGroupName = ss[1] || `group${groupId}`;
-              faceGroups.push(`${skinName}::${faceGroupName}`);
+              faceGroups.push(`${skinName}::${faceGroupName}::face`);
               groupHierarchy[skinName].faces.push(faceGroupName);
               break;
             }
 
             case 'ng': {
               nodeGroupId++;
               const nodeGroupName = ss[1] || `nodeGroup${nodeGroupId}`;
-              nodeGroups.push(`${skinName}::${nodeGroupName}`);
+              nodeGroups.push(`${skinName}::${nodeGroupName}::node`);
               groupHierarchy[skinName].nodes.push(nodeGroupName);
               break;
             }