813 lines
24 KiB
TypeScript
813 lines
24 KiB
TypeScript
import * as plugins from './00plugins.js';
|
|
import {
|
|
DeesElement,
|
|
type TemplateResult,
|
|
property,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
state,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as domtools from '@design.estate/dees-domtools';
|
|
import './dees-icon.js';
|
|
import { demoFunc } from './dees-dashboardgrid.demo.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-dashboardgrid': DeesDashboardgrid;
|
|
}
|
|
}
|
|
|
|
export interface IDashboardWidget {
|
|
id: string;
|
|
x: number;
|
|
y: number;
|
|
w: number;
|
|
h: number;
|
|
minW?: number;
|
|
minH?: number;
|
|
maxW?: number;
|
|
maxH?: number;
|
|
content: TemplateResult | string;
|
|
title?: string;
|
|
icon?: string;
|
|
noMove?: boolean;
|
|
noResize?: boolean;
|
|
locked?: boolean;
|
|
autoPosition?: boolean; // Auto-position widget in first available space
|
|
}
|
|
|
|
@customElement('dees-dashboardgrid')
|
|
export class DeesDashboardgrid extends DeesElement {
|
|
// STATIC
|
|
public static demo = demoFunc;
|
|
|
|
// INSTANCE
|
|
@property({ type: Array })
|
|
public widgets: IDashboardWidget[] = [];
|
|
|
|
@property({ type: Number })
|
|
public cellHeight: number = 80;
|
|
|
|
@property({ type: Object })
|
|
public margin: number | { top?: number; right?: number; bottom?: number; left?: number } = 10;
|
|
|
|
@property({ type: Number })
|
|
public columns: number = 12;
|
|
|
|
@property({ type: Boolean })
|
|
public editable: boolean = true;
|
|
|
|
@property({ type: Boolean, reflect: true })
|
|
public enableAnimation: boolean = true;
|
|
|
|
@property({ type: String })
|
|
public cellHeightUnit: 'px' | 'em' | 'rem' | 'auto' = 'px';
|
|
|
|
@property({ type: Boolean })
|
|
public rtl: boolean = false; // Right-to-left support
|
|
|
|
@property({ type: Boolean })
|
|
public showGridLines: boolean = false;
|
|
|
|
@state()
|
|
private draggedWidget: IDashboardWidget | null = null;
|
|
|
|
@state()
|
|
private draggedElement: HTMLElement | null = null;
|
|
|
|
@state()
|
|
private dragOffsetX: number = 0;
|
|
|
|
@state()
|
|
private dragOffsetY: number = 0;
|
|
|
|
@state()
|
|
private dragMouseX: number = 0;
|
|
|
|
@state()
|
|
private dragMouseY: number = 0;
|
|
|
|
@state()
|
|
private placeholderPosition: { x: number; y: number } | null = null;
|
|
|
|
@state()
|
|
private resizingWidget: IDashboardWidget | null = null;
|
|
|
|
@state()
|
|
private resizeStartW: number = 0;
|
|
|
|
@state()
|
|
private resizeStartH: number = 0;
|
|
|
|
@state()
|
|
private resizeStartX: number = 0;
|
|
|
|
@state()
|
|
private resizeStartY: number = 0;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.grid-container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 400px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.grid-widget {
|
|
position: absolute;
|
|
will-change: auto;
|
|
}
|
|
|
|
:host([enableanimation]) .grid-widget {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.grid-widget.dragging {
|
|
z-index: 1000;
|
|
transition: none !important;
|
|
opacity: 0.8;
|
|
cursor: grabbing;
|
|
pointer-events: none;
|
|
will-change: transform;
|
|
}
|
|
|
|
.grid-widget.placeholder {
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.grid-widget.placeholder .widget-content {
|
|
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
|
|
border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
|
box-shadow: none;
|
|
}
|
|
|
|
.grid-widget.resizing {
|
|
transition: none !important;
|
|
}
|
|
|
|
.widget-content {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
border-radius: 8px;
|
|
box-shadow: ${cssManager.bdTheme(
|
|
'0 1px 3px rgba(0, 0, 0, 0.1)',
|
|
'0 1px 3px rgba(0, 0, 0, 0.3)'
|
|
)};
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.grid-widget:hover .widget-content {
|
|
box-shadow: ${cssManager.bdTheme(
|
|
'0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
'0 4px 12px rgba(0, 0, 0, 0.4)'
|
|
)};
|
|
}
|
|
|
|
.grid-widget.dragging .widget-content {
|
|
box-shadow: ${cssManager.bdTheme(
|
|
'0 16px 48px rgba(0, 0, 0, 0.25)',
|
|
'0 16px 48px rgba(0, 0, 0, 0.6)'
|
|
)};
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.widget-header {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.widget-header:hover {
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
|
}
|
|
|
|
.widget-header:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.widget-header.locked {
|
|
cursor: default;
|
|
}
|
|
|
|
.widget-header.locked:hover {
|
|
background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
|
|
}
|
|
|
|
.widget-header dees-icon {
|
|
font-size: 16px;
|
|
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
}
|
|
|
|
.widget-body {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: auto;
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
|
}
|
|
|
|
.widget-body.has-header {
|
|
top: 45px;
|
|
}
|
|
|
|
/* Resize handles */
|
|
.resize-handle {
|
|
position: absolute;
|
|
background: transparent;
|
|
z-index: 10;
|
|
}
|
|
|
|
.resize-handle:hover {
|
|
background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.resize-handle-e {
|
|
cursor: ew-resize;
|
|
width: 12px;
|
|
right: -6px;
|
|
top: 10%;
|
|
height: 80%;
|
|
}
|
|
|
|
.resize-handle-s {
|
|
cursor: ns-resize;
|
|
height: 12px;
|
|
width: 80%;
|
|
bottom: -6px;
|
|
left: 10%;
|
|
}
|
|
|
|
.resize-handle-se {
|
|
cursor: se-resize;
|
|
width: 20px;
|
|
height: 20px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.resize-handle-se::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 4px;
|
|
bottom: 4px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-right: 2px solid ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
border-bottom: 2px solid ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
}
|
|
|
|
.grid-widget:hover .resize-handle-se {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.resize-handle-se:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.resize-handle-se:hover::after {
|
|
border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
|
}
|
|
|
|
/* Placeholder */
|
|
.grid-placeholder {
|
|
position: absolute;
|
|
background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
|
opacity: 0.1;
|
|
border-radius: 8px;
|
|
border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
|
transition: all 0.2s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 400px;
|
|
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
|
text-align: center;
|
|
padding: 32px;
|
|
}
|
|
|
|
.empty-state dees-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Grid lines */
|
|
.grid-lines {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.grid-line-vertical {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.grid-line-horizontal {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
opacity: 0.3;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
if (this.widgets.length === 0) {
|
|
return html`
|
|
<div class="empty-state">
|
|
<dees-icon .icon=${'lucide:layoutGrid'}></dees-icon>
|
|
<div>No widgets configured</div>
|
|
<div style="font-size: 14px; margin-top: 8px;">Add widgets to populate the dashboard</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const margins = this.getMargins();
|
|
const maxY = Math.max(...this.widgets.map(w => w.y + w.h), 4);
|
|
const cellHeightValue = this.getCellHeight();
|
|
const gridHeight = maxY * cellHeightValue + (maxY + 1) * margins.vertical;
|
|
|
|
return html`
|
|
<div class="grid-container" style="height: ${gridHeight}px;">
|
|
${this.showGridLines ? this.renderGridLines(gridHeight) : ''}
|
|
${this.widgets.map(widget => this.renderWidget(widget))}
|
|
${this.placeholderPosition && this.draggedWidget ? this.renderPlaceholder() : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderGridLines(gridHeight: number): TemplateResult {
|
|
const margins = this.getMargins();
|
|
const cellHeightValue = this.getCellHeight();
|
|
|
|
// Convert margin to percentage for consistent calculation
|
|
const containerWidth = this.getBoundingClientRect().width;
|
|
const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
|
|
|
|
const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
|
|
|
|
const verticalLines = [];
|
|
const horizontalLines = [];
|
|
|
|
// Vertical lines
|
|
for (let i = 0; i <= this.columns; i++) {
|
|
const left = i * cellWidth + i * marginHorizontalPercent;
|
|
verticalLines.push(html`
|
|
<div class="grid-line-vertical" style="left: ${left}%;"></div>
|
|
`);
|
|
}
|
|
|
|
// Horizontal lines
|
|
const numHorizontalLines = Math.ceil(gridHeight / (cellHeightValue + margins.vertical));
|
|
for (let i = 0; i <= numHorizontalLines; i++) {
|
|
const top = i * cellHeightValue + i * margins.vertical;
|
|
horizontalLines.push(html`
|
|
<div class="grid-line-horizontal" style="top: ${top}px;"></div>
|
|
`);
|
|
}
|
|
|
|
return html`
|
|
<div class="grid-lines">
|
|
${verticalLines}
|
|
${horizontalLines}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderWidget(widget: IDashboardWidget): TemplateResult {
|
|
const isDragging = this.draggedWidget?.id === widget.id;
|
|
const isResizing = this.resizingWidget?.id === widget.id;
|
|
const isLocked = widget.locked || !this.editable;
|
|
|
|
const margins = this.getMargins();
|
|
const cellHeightValue = this.getCellHeight();
|
|
|
|
// Convert margin to percentage of container width for consistent calculation
|
|
const containerWidth = this.getBoundingClientRect().width;
|
|
const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
|
|
|
|
const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
|
|
|
|
const left = widget.x * cellWidth + (widget.x + 1) * marginHorizontalPercent;
|
|
const top = widget.y * cellHeightValue + (widget.y + 1) * margins.vertical;
|
|
const width = widget.w * cellWidth + (widget.w - 1) * marginHorizontalPercent;
|
|
const height = widget.h * cellHeightValue + (widget.h - 1) * margins.vertical;
|
|
|
|
// Apply transform when dragging for smooth movement
|
|
let transform = '';
|
|
if (isDragging && this.draggedElement) {
|
|
const containerRect = this.getBoundingClientRect();
|
|
const translateX = this.dragMouseX - containerRect.left - this.dragOffsetX - (left / 100 * containerRect.width);
|
|
const translateY = this.dragMouseY - containerRect.top - this.dragOffsetY - top;
|
|
transform = `transform: translate(${translateX}px, ${translateY}px);`;
|
|
}
|
|
|
|
return html`
|
|
<div
|
|
class="grid-widget ${isDragging ? 'dragging' : ''} ${isResizing ? 'resizing' : ''}"
|
|
style="
|
|
${this.rtl ? 'right' : 'left'}: ${left}%;
|
|
top: ${top}px;
|
|
width: ${width}%;
|
|
height: ${height}px;
|
|
${transform}
|
|
"
|
|
data-widget-id="${widget.id}"
|
|
>
|
|
<div class="widget-content">
|
|
${widget.title ? html`
|
|
<div
|
|
class="widget-header ${isLocked ? 'locked' : ''}"
|
|
@mousedown=${!isLocked && !widget.noMove ? (e: MouseEvent) => this.startDrag(e, widget) : null}
|
|
>
|
|
${widget.icon ? html`<dees-icon .icon=${widget.icon}></dees-icon>` : ''}
|
|
${widget.title}
|
|
</div>
|
|
` : ''}
|
|
<div class="widget-body ${widget.title ? 'has-header' : ''}">
|
|
${widget.content}
|
|
</div>
|
|
${!isLocked && !widget.noResize ? html`
|
|
<div class="resize-handle resize-handle-e" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 'e')}></div>
|
|
<div class="resize-handle resize-handle-s" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 's')}></div>
|
|
<div class="resize-handle resize-handle-se" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 'se')}></div>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderPlaceholder(): TemplateResult {
|
|
if (!this.placeholderPosition || !this.draggedWidget) return html``;
|
|
|
|
const margins = this.getMargins();
|
|
const cellHeightValue = this.getCellHeight();
|
|
|
|
// Convert margin to percentage of container width for consistent calculation
|
|
const containerWidth = this.getBoundingClientRect().width;
|
|
const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
|
|
|
|
const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
|
|
|
|
const left = this.placeholderPosition.x * cellWidth + (this.placeholderPosition.x + 1) * marginHorizontalPercent;
|
|
const top = this.placeholderPosition.y * cellHeightValue + (this.placeholderPosition.y + 1) * margins.vertical;
|
|
const width = this.draggedWidget.w * cellWidth + (this.draggedWidget.w - 1) * marginHorizontalPercent;
|
|
const height = this.draggedWidget.h * cellHeightValue + (this.draggedWidget.h - 1) * margins.vertical;
|
|
|
|
return html`
|
|
<div
|
|
class="grid-widget placeholder"
|
|
style="
|
|
${this.rtl ? 'right' : 'left'}: ${left}%;
|
|
top: ${top}px;
|
|
width: ${width}%;
|
|
height: ${height}px;
|
|
"
|
|
>
|
|
<div class="widget-content"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private startDrag(e: MouseEvent, widget: IDashboardWidget) {
|
|
e.preventDefault();
|
|
this.draggedWidget = widget;
|
|
this.draggedElement = (e.currentTarget as HTMLElement).closest('.grid-widget') as HTMLElement;
|
|
|
|
const rect = this.draggedElement.getBoundingClientRect();
|
|
|
|
this.dragOffsetX = e.clientX - rect.left;
|
|
this.dragOffsetY = e.clientY - rect.top;
|
|
|
|
// Initialize mouse position
|
|
this.dragMouseX = e.clientX;
|
|
this.dragMouseY = e.clientY;
|
|
|
|
// Initialize placeholder at current widget position
|
|
this.placeholderPosition = { x: widget.x, y: widget.y };
|
|
|
|
document.addEventListener('mousemove', this.handleDrag);
|
|
document.addEventListener('mouseup', this.endDrag);
|
|
|
|
this.requestUpdate();
|
|
}
|
|
|
|
private handleDrag = (e: MouseEvent) => {
|
|
if (!this.draggedWidget || !this.draggedElement) return;
|
|
|
|
// Update mouse position for smooth dragging
|
|
this.dragMouseX = e.clientX;
|
|
this.dragMouseY = e.clientY;
|
|
|
|
const containerRect = this.getBoundingClientRect();
|
|
const margins = this.getMargins();
|
|
const cellHeightValue = this.getCellHeight();
|
|
|
|
// Get widget position relative to grid container
|
|
const mouseX = e.clientX - containerRect.left - this.dragOffsetX;
|
|
const mouseY = e.clientY - containerRect.top - this.dragOffsetY;
|
|
|
|
// Use pixel calculations for accuracy
|
|
const totalWidth = containerRect.width;
|
|
const totalMarginWidth = margins.horizontal * (this.columns + 1);
|
|
const availableWidth = totalWidth - totalMarginWidth;
|
|
const cellWidthPx = availableWidth / this.columns;
|
|
|
|
// Calculate grid X position
|
|
// Account for the initial margin and then repeating pattern of cell+margin
|
|
let gridX = 0;
|
|
if (mouseX > margins.horizontal) {
|
|
const adjustedX = mouseX - margins.horizontal;
|
|
const cellPlusMargin = cellWidthPx + margins.horizontal;
|
|
gridX = Math.floor(adjustedX / cellPlusMargin + 0.5); // +0.5 for rounding to nearest
|
|
}
|
|
|
|
// Calculate grid Y position
|
|
let gridY = 0;
|
|
if (mouseY > margins.vertical) {
|
|
const adjustedY = mouseY - margins.vertical;
|
|
const cellPlusMargin = cellHeightValue + margins.vertical;
|
|
gridY = Math.floor(adjustedY / cellPlusMargin + 0.5); // +0.5 for rounding to nearest
|
|
}
|
|
|
|
const clampedX = Math.max(0, Math.min(gridX, this.columns - this.draggedWidget.w));
|
|
const clampedY = Math.max(0, gridY);
|
|
|
|
// Update placeholder position instead of widget position during drag
|
|
if (!this.placeholderPosition ||
|
|
clampedX !== this.placeholderPosition.x ||
|
|
clampedY !== this.placeholderPosition.y) {
|
|
const collision = this.checkCollision(this.draggedWidget, clampedX, clampedY);
|
|
if (!collision) {
|
|
this.placeholderPosition = { x: clampedX, y: clampedY };
|
|
this.requestUpdate();
|
|
}
|
|
}
|
|
};
|
|
|
|
private endDrag = () => {
|
|
// Apply final position from placeholder
|
|
if (this.draggedWidget && this.placeholderPosition) {
|
|
this.draggedWidget.x = this.placeholderPosition.x;
|
|
this.draggedWidget.y = this.placeholderPosition.y;
|
|
|
|
this.dispatchEvent(new CustomEvent('widget-move', {
|
|
detail: { widget: this.draggedWidget },
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
|
|
// Clear drag state
|
|
this.draggedWidget = null;
|
|
this.draggedElement = null;
|
|
this.placeholderPosition = null;
|
|
this.dragMouseX = 0;
|
|
this.dragMouseY = 0;
|
|
|
|
document.removeEventListener('mousemove', this.handleDrag);
|
|
document.removeEventListener('mouseup', this.endDrag);
|
|
|
|
this.requestUpdate();
|
|
};
|
|
|
|
private startResize(e: MouseEvent, widget: IDashboardWidget, handle: string) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.resizingWidget = widget;
|
|
this.resizeStartW = widget.w;
|
|
this.resizeStartH = widget.h;
|
|
this.resizeStartX = e.clientX;
|
|
this.resizeStartY = e.clientY;
|
|
|
|
const handleResize = (e: MouseEvent) => {
|
|
if (!this.resizingWidget) return;
|
|
|
|
const containerRect = this.getBoundingClientRect();
|
|
const margins = this.getMargins();
|
|
const cellHeightValue = this.getCellHeight();
|
|
const cellWidth = (containerRect.width - margins.horizontal * (this.columns + 1)) / this.columns;
|
|
|
|
const deltaX = e.clientX - this.resizeStartX;
|
|
const deltaY = e.clientY - this.resizeStartY;
|
|
|
|
if (handle.includes('e')) {
|
|
const newW = Math.round(this.resizeStartW + deltaX / (cellWidth + margins.horizontal));
|
|
const maxW = widget.maxW || (this.columns - this.resizingWidget.x);
|
|
this.resizingWidget.w = Math.max(widget.minW || 1, Math.min(newW, maxW));
|
|
}
|
|
|
|
if (handle.includes('s')) {
|
|
const newH = Math.round(this.resizeStartH + deltaY / (cellHeightValue + margins.vertical));
|
|
const maxH = widget.maxH || Infinity;
|
|
this.resizingWidget.h = Math.max(widget.minH || 1, Math.min(newH, maxH));
|
|
}
|
|
|
|
this.requestUpdate();
|
|
|
|
this.dispatchEvent(new CustomEvent('widget-resize', {
|
|
detail: { widget: this.resizingWidget },
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
};
|
|
|
|
const endResize = () => {
|
|
this.resizingWidget = null;
|
|
document.removeEventListener('mousemove', handleResize);
|
|
document.removeEventListener('mouseup', endResize);
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleResize);
|
|
document.addEventListener('mouseup', endResize);
|
|
}
|
|
|
|
|
|
public removeWidget(widgetId: string) {
|
|
this.widgets = this.widgets.filter(w => w.id !== widgetId);
|
|
}
|
|
|
|
public updateWidget(widgetId: string, updates: Partial<IDashboardWidget>) {
|
|
this.widgets = this.widgets.map(w =>
|
|
w.id === widgetId ? { ...w, ...updates } : w
|
|
);
|
|
}
|
|
|
|
public getLayout(): Array<{ id: string; x: number; y: number; w: number; h: number }> {
|
|
return this.widgets.map(({ id, x, y, w, h }) => ({ id, x, y, w, h }));
|
|
}
|
|
|
|
public setLayout(layout: Array<{ id: string; x: number; y: number; w: number; h: number }>) {
|
|
this.widgets = this.widgets.map(widget => {
|
|
const layoutItem = layout.find(l => l.id === widget.id);
|
|
return layoutItem ? { ...widget, ...layoutItem } : widget;
|
|
});
|
|
}
|
|
|
|
public lockGrid() {
|
|
this.editable = false;
|
|
}
|
|
|
|
public unlockGrid() {
|
|
this.editable = true;
|
|
}
|
|
|
|
private getMargins(): { horizontal: number; vertical: number; top: number; right: number; bottom: number; left: number } {
|
|
if (typeof this.margin === 'number') {
|
|
return {
|
|
horizontal: this.margin,
|
|
vertical: this.margin,
|
|
top: this.margin,
|
|
right: this.margin,
|
|
bottom: this.margin,
|
|
left: this.margin,
|
|
};
|
|
}
|
|
|
|
const margins = {
|
|
top: this.margin.top ?? 10,
|
|
right: this.margin.right ?? 10,
|
|
bottom: this.margin.bottom ?? 10,
|
|
left: this.margin.left ?? 10,
|
|
};
|
|
|
|
return {
|
|
...margins,
|
|
horizontal: (margins.left + margins.right) / 2,
|
|
vertical: (margins.top + margins.bottom) / 2,
|
|
};
|
|
}
|
|
|
|
private getCellHeight(): number {
|
|
if (this.cellHeightUnit === 'auto') {
|
|
// Calculate square cells based on container width
|
|
const containerWidth = this.getBoundingClientRect().width;
|
|
const margins = this.getMargins();
|
|
const cellWidth = (containerWidth - margins.horizontal * (this.columns + 1)) / this.columns;
|
|
return cellWidth;
|
|
}
|
|
|
|
return this.cellHeight;
|
|
}
|
|
|
|
private checkCollision(widget: IDashboardWidget, newX: number, newY: number): boolean {
|
|
const widgets = this.widgets.filter(w => w.id !== widget.id);
|
|
|
|
for (const other of widgets) {
|
|
if (newX < other.x + other.w &&
|
|
newX + widget.w > other.x &&
|
|
newY < other.y + other.h &&
|
|
newY + widget.h > other.y) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
public addWidget(widget: IDashboardWidget, autoPosition = false) {
|
|
if (autoPosition || widget.autoPosition) {
|
|
// Find first available position
|
|
const position = this.findAvailablePosition(widget.w, widget.h);
|
|
widget.x = position.x;
|
|
widget.y = position.y;
|
|
}
|
|
|
|
this.widgets = [...this.widgets, widget];
|
|
}
|
|
|
|
private findAvailablePosition(width: number, height: number): { x: number; y: number } {
|
|
// Try to find space starting from top-left
|
|
for (let y = 0; y < 100; y++) { // Reasonable limit
|
|
for (let x = 0; x <= this.columns - width; x++) {
|
|
const testWidget = { id: 'test', x, y, w: width, h: height, content: '' } as IDashboardWidget;
|
|
if (!this.checkCollision(testWidget, x, y)) {
|
|
return { x, y };
|
|
}
|
|
}
|
|
}
|
|
|
|
// If no space found, place at bottom
|
|
const maxY = Math.max(...this.widgets.map(w => w.y + w.h), 0);
|
|
return { x: 0, y: maxY };
|
|
}
|
|
|
|
public compact(direction: 'vertical' | 'horizontal' = 'vertical') {
|
|
const sortedWidgets = [...this.widgets].sort((a, b) => {
|
|
if (direction === 'vertical') {
|
|
if (a.y !== b.y) return a.y - b.y;
|
|
return a.x - b.x;
|
|
} else {
|
|
if (a.x !== b.x) return a.x - b.x;
|
|
return a.y - b.y;
|
|
}
|
|
});
|
|
|
|
for (const widget of sortedWidgets) {
|
|
if (widget.locked || widget.noMove) continue;
|
|
|
|
if (direction === 'vertical') {
|
|
// Move up as far as possible
|
|
while (widget.y > 0 && !this.checkCollision(widget, widget.x, widget.y - 1)) {
|
|
widget.y--;
|
|
}
|
|
} else {
|
|
// Move left as far as possible
|
|
while (widget.x > 0 && !this.checkCollision(widget, widget.x - 1, widget.y)) {
|
|
widget.x--;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.requestUpdate();
|
|
}
|
|
} |