feat: layer-tree selection sync + group folders in tree + ribbonbar readability

2026-07-02 00:47:28 +02:00
parent 2eead4c1aa
commit 9f749e8ebd
8 changed files with 247 additions and 12 deletions
@@ -238,6 +238,112 @@ describe('LayerPanel', () => {
    fireEvent.click(toggleBtn);
    expect(onToggleLayer).toHaveBeenCalled();
  });
+  // Helper: expand a tree node by clicking its toggle button
+  function expandLayer(label: string) {
+    const layerNode = screen.getByText(label).closest('.tree-node');
+    expect(layerNode).toBeTruthy();
+    const toggle = layerNode?.querySelector('.tree-toggle');
+    expect(toggle).toBeTruthy();
+    fireEvent.click(toggle!);
+  }
+
+  it('should highlight selected element in tree when selectedElementIds is provided', () => {
+    const layers = [makeLayer({ id: 'layer-1', name: 'Layer 1' })];
+    const elements = [
+      makeElement({ id: 'elem-1', type: 'rect', layerId: 'layer-1' }),
+      makeElement({ id: 'elem-2', type: 'circle', layerId: 'layer-1' }),
+    ];
+    const { container } = render(
+      <LayerPanel
+        layers={layers}
+        elements={elements}
+        selectedElementIds={['elem-2']}
+        activeLayerId="layer-1"
+        onSelectLayer={() => {}}
+        onAddLayer={() => {}}
+        onToggleLayer={() => {}}
+      />,
+    );
+    expandLayer('Layer 1');
+    // The element node for elem-2 should have the 'active' class
+    const treeNodes = container.querySelectorAll('.tree-node');
+    const elemNode = Array.from(treeNodes).find((n) => n.textContent?.includes('Kreis'));
+    expect(elemNode).toBeTruthy();
+    expect(elemNode?.classList.contains('active')).toBe(true);
+  });
+
+  it('should call onSelectElement when clicking an element in the tree', () => {
+    const layers = [makeLayer({ id: 'layer-1', name: 'Layer 1' })];
+    const elements = [
+      makeElement({ id: 'elem-1', type: 'rect', layerId: 'layer-1' }),
+    ];
+    const onSelectElement = vi.fn();
+    render(
+      <LayerPanel
+        layers={layers}
+        elements={elements}
+        activeLayerId="layer-1"
+        onSelectLayer={() => {}}
+        onSelectElement={onSelectElement}
+        onAddLayer={() => {}}
+        onToggleLayer={() => {}}
+      />,
+    );
+    expandLayer('Layer 1');
+    fireEvent.click(screen.getByText('Rechteck'));
+    expect(onSelectElement).toHaveBeenCalledWith('elem-1');
+  });
+
+  it('should render groups as tree nodes with their elements as children', () => {
+    const layers = [makeLayer({ id: 'layer-1', name: 'Layer 1' })];
+    const elements = [
+      makeElement({ id: 'elem-1', type: 'rect', layerId: 'layer-1' }),
+      makeElement({ id: 'elem-2', type: 'circle', layerId: 'layer-1' }),
+    ];
+    const groups = [
+      { id: 'group-1', name: 'Gruppe A', elementIds: ['elem-1', 'elem-2'], parentGroupId: null },
+    ];
+    render(
+      <LayerPanel
+        layers={layers}
+        elements={elements}
+        groups={groups}
+        activeLayerId="layer-1"
+        onSelectLayer={() => {}}
+        onAddLayer={() => {}}
+        onToggleLayer={() => {}}
+      />,
+    );
+    expandLayer('Layer 1');
+    expect(screen.getByText('Gruppe A')).toBeInTheDocument();
+  });
+
+  it('should select all group elements when clicking a group node', () => {
+    const layers = [makeLayer({ id: 'layer-1', name: 'Layer 1' })];
+    const elements = [
+      makeElement({ id: 'elem-1', type: 'rect', layerId: 'layer-1' }),
+      makeElement({ id: 'elem-2', type: 'circle', layerId: 'layer-1' }),
+    ];
+    const groups = [
+      { id: 'group-1', name: 'Gruppe A', elementIds: ['elem-1', 'elem-2'], parentGroupId: null },
+    ];
+    const onSelectElement = vi.fn();
+    render(
+      <LayerPanel
+        layers={layers}
+        elements={elements}
+        groups={groups}
+        activeLayerId="layer-1"
+        onSelectLayer={() => {}}
+        onSelectElement={onSelectElement}
+        onAddLayer={() => {}}
+        onToggleLayer={() => {}}
+      />,
+    );
+    expandLayer('Layer 1');
+    fireEvent.click(screen.getByText('Gruppe A'));
+    expect(onSelectElement).toHaveBeenCalledWith('elem-1');
+  });
 });

 // ─── PropertiesPanel ─────────────────────────────────