Files

Juergen Kunz 6f9c92a866 feat: implement DeesDashboardgrid component with drag-and-drop functionality

- Added DeesDashboardgrid class for managing a grid of dashboard widgets.
- Implemented widget dragging and resizing capabilities.
- Introduced layout management with collision detection and margin resolution.
- Created styles for grid layout, widget appearance, and animations.
- Added support for customizable margins, cell height, and grid lines.
- Included methods for adding, removing, and updating widgets dynamically.
- Implemented context menu for widget actions and keyboard navigation support.
- Established a responsive design with breakpoint handling for different layouts.

2025-09-17 21:46:44 +00:00

2.5 KiB

Raw Blame History

dees-dashboardgrid

<dees-dashboardgrid> renders a configurable dashboard layout with draggable and resizable tiles. The component is now grouped in its own folder alongside supporting utilities and styles.

Key Features

Pointer-driven drag and resize interactions with keyboard fallbacks (arrow keys to move, Shift + arrows to resize).
Collision-aware placement that swaps compatible tiles or displaces blocking tiles into the next free slot.
Context menu (right-click on a tile header) that exposes destructive actions such as tile removal via dees-contextmenu.
Layout persistence helpers via getLayout(), setLayout(...), and the layout-change event.
Responsive presets through the layouts map and applyBreakpointLayout(...) helper to hydrate per-breakpoint arrangements.

Public API Highlights

Property	Description
`widgets`	Array of tile descriptors (`DashboardWidget`).
`columns`	Number of grid columns.
`layouts`	Optional record of named layout definitions.
`activeBreakpoint`	Name of the currently applied breakpoint layout.
`editable`	Toggles drag/resize affordances.

Method	Description
`addWidget(widget, autoPosition?)`	Adds a tile, optionally auto-placing it into the next free slot.
`removeWidget(id)`	Removes a tile and emits `widget-remove`.
`applyBreakpointLayout(name)`	Applies a layout from the `layouts` map.
`getLayout()` / `setLayout(layout)`	Retrieve or apply persisted layouts.
`compact(direction?)`	Densifies the grid vertically (default) or horizontally.

Event	Detail payload
`widget-move`	`{ widget, displaced, swappedWith }`
`widget-resize`	`{ widget, displaced, swappedWith }`
`widget-remove`	`{ widget }`
`layout-change`	`{ layout }`

Usage Notes

Right-click a tile header to open the contextual menu and delete the tile.
When resizing, blocking tiles will automatically reflow into free space once the interaction completes.
Listen to layout-change to persist layouts to storage; rehydrate using setLayout or the layouts map.
For responsive dashboards, populate grid.layouts = { base: [...], mobile: [...] } and call applyBreakpointLayout based on your own breakpoint logic (see the co-located demo for an example).

Demo

The updated dees-dashboardgrid.demo.ts showcases live breakpoint switching, layout persistence, and the context menu. Run the demo gallery to explore the interactions end-to-end.

2.5 KiB Raw Blame History