feat: lasso selection, multi-select panel, and named groups
- Add lasso/box selection via selectionOnDrag (Space to pan, lasso by default) - Add lasso/pan toggle button in canvas controls (bottom-left) - Multi-select panel in right panel when 2+ nodes selected (including zones) - Create named Group node from selected nodes with bounding box math - Group node: resizable, inline rename, show/hide border toggle, status summary - GroupDetailPanel: lists members, online/offline count, ungroup action - Fix group persistence after save/reload (extend proxmox container map to include group nodes) - Fix groupRect serialization to preserve parent_id - Remove background color from group and proxmox container node wrappers - Add tests for all new store actions, GroupNode, MultiSelectPanel, GroupDetailPanel
This commit is contained in:
@@ -16,8 +16,10 @@ vi.mock('@xyflow/react', () => ({
|
||||
},
|
||||
Background: () => null,
|
||||
Controls: () => null,
|
||||
ControlButton: () => null,
|
||||
BackgroundVariant: { Dots: 'dots' },
|
||||
ConnectionMode: { Loose: 'loose' },
|
||||
SelectionMode: { Partial: 'partial' },
|
||||
}))
|
||||
|
||||
vi.mock('@xyflow/react/dist/style.css', () => ({}))
|
||||
@@ -151,6 +153,55 @@ describe('CanvasContainer', () => {
|
||||
expect(rfProps.deleteKeyCode).toEqual(['Backspace', 'Delete'])
|
||||
})
|
||||
|
||||
// ── Lasso / multi-select ──────────────────────────────────────────────────
|
||||
|
||||
it('enables selectionOnDrag for lasso selection', () => {
|
||||
render(<CanvasContainer />)
|
||||
expect(rfProps.selectionOnDrag).toBe(true)
|
||||
})
|
||||
|
||||
it('sets panActivationKeyCode to Space', () => {
|
||||
render(<CanvasContainer />)
|
||||
expect(rfProps.panActivationKeyCode).toBe('Space')
|
||||
})
|
||||
|
||||
it('sets panOnDrag to [1, 2]', () => {
|
||||
render(<CanvasContainer />)
|
||||
expect(rfProps.panOnDrag).toEqual([1, 2])
|
||||
})
|
||||
|
||||
it('sets selectionMode to Partial', () => {
|
||||
render(<CanvasContainer />)
|
||||
expect(rfProps.selectionMode).toBe('partial')
|
||||
})
|
||||
|
||||
it('sets multiSelectionKeyCode to Meta and Control', () => {
|
||||
render(<CanvasContainer />)
|
||||
expect(rfProps.multiSelectionKeyCode).toEqual(['Meta', 'Control'])
|
||||
})
|
||||
|
||||
it('clears selectedNode (sets null) on Ctrl+click instead of selecting', () => {
|
||||
const node = makeNode('n1')
|
||||
useCanvasStore.setState({ nodes: [node], selectedNodeId: 'n1' })
|
||||
render(<CanvasContainer />)
|
||||
;(rfProps.onNodeClick as (...args: unknown[]) => unknown)(
|
||||
{ ctrlKey: true, metaKey: false } as unknown as MouseEvent,
|
||||
node,
|
||||
)
|
||||
expect(useCanvasStore.getState().selectedNodeId).toBeNull()
|
||||
})
|
||||
|
||||
it('clears selectedNode (sets null) on Cmd+click', () => {
|
||||
const node = makeNode('n1')
|
||||
useCanvasStore.setState({ nodes: [node], selectedNodeId: 'n1' })
|
||||
render(<CanvasContainer />)
|
||||
;(rfProps.onNodeClick as (...args: unknown[]) => unknown)(
|
||||
{ ctrlKey: false, metaKey: true } as unknown as MouseEvent,
|
||||
node,
|
||||
)
|
||||
expect(useCanvasStore.getState().selectedNodeId).toBeNull()
|
||||
})
|
||||
|
||||
// ── onBeforeDelete snapshot ───────────────────────────────────────────────
|
||||
|
||||
it('onBeforeDelete calls snapshotHistory and returns true', async () => {
|
||||
|
||||
Reference in New Issue
Block a user