Tag

frontend/src/views/DashboardPage.tsx

@@ -99,6 +99,8 @@ type DashboardNote = {
 const dashboardPreferenceVersion = 3;
 const rowHeight = 48;
 const gridColumns = 12;
+const maxWidgetHeight = 40;
+const maxWidgetY = 120;
 
 const widgetDefinitions: WidgetDefinition[] = [
   { type: "dayControl", title: "Tagessteuerung", defaultSize: { w: 6, h: 5 }, minSize: { w: 4, h: 4 }, fixed: true },
@@ -278,9 +280,9 @@ function normalizePreference(preference: Partial<DashboardPreference>): Dashboar
       type: widget.type,
       title: typeof widget.title === "string" ? widget.title : widgetTitle(widget.type),
       x: clampNumber(widget.x, 0, gridColumns - 1),
-      y: clampNumber(widget.y, 0, 30),
+      y: clampNumber(widget.y, 0, maxWidgetY),
       w: clampNumber(widget.w, widgetMinSize(widget.type).w, gridColumns),
-      h: clampNumber(widget.h, widgetMinSize(widget.type).h, 8),
+      h: clampNumber(widget.h, widgetMinSize(widget.type).h, maxWidgetHeight),
       config: normalizeWidgetConfig(widget.type, widget.config)
     }))
     .reduce<DashboardWidget[]>((placed, widget) => [...placed, resolveWidgetPlacement(placed, widget)], []);
@@ -332,14 +334,14 @@ function columnsOverlap(left: DashboardWidget, right: DashboardWidget) {
 function normalizeWidgetPlacement(changed: DashboardWidget) {
   const minSize = widgetMinSize(changed.type);
   const w = clampNumber(changed.w, minSize.w, gridColumns);
-  const h = clampNumber(changed.h, minSize.h, 8);
+  const h = clampNumber(changed.h, minSize.h, maxWidgetHeight);
 
   return {
     ...changed,
     w,
     h,
     x: clampNumber(changed.x, 0, gridColumns - w),
-    y: clampNumber(changed.y, 0, 80)
+    y: clampNumber(changed.y, 0, maxWidgetY)
   };
 }
 
@@ -352,7 +354,7 @@ function resolveWidgetPlacement(widgets: DashboardWidget[], changed: DashboardWi
     return next;
   }
 
-  const maxExistingRow = Math.max(80, ...widgets.filter((widget) => widget.id !== next.id).map((widget) => widget.y + widget.h + next.h));
+  const maxExistingRow = Math.max(maxWidgetY, ...widgets.filter((widget) => widget.id !== next.id).map((widget) => widget.y + widget.h + next.h));
 
   for (let distance = 1; distance <= maxExistingRow + next.h; distance += 1) {
     const yAbove = next.y - distance;
@@ -367,7 +369,7 @@ function resolveWidgetPlacement(widgets: DashboardWidget[], changed: DashboardWi
     }
   }
 
-  return { ...next, y: maxExistingRow + h };
+  return { ...next, y: maxExistingRow + next.h };
 }
 
 function moveCollidingWidgetsDown(widgets: DashboardWidget[], lockedWidgetId: string) {
@@ -462,7 +464,7 @@ function placeWidget(widgets: DashboardWidget[], changed: DashboardWidget) {
   return layoutWidgetsWithPlacement(widgets, changed);
 }
 
-function widgetPlacementFromPoint(gridElement: HTMLDivElement, widgets: DashboardWidget[], widget: DashboardWidget, clientX: number, clientY: number) {
+function widgetPlacementFromPoint(gridElement: HTMLDivElement, widget: DashboardWidget, clientX: number, clientY: number) {
   const rect = gridElement.getBoundingClientRect();
   const styles = window.getComputedStyle(gridElement);
   const columnGap = Number.parseFloat(styles.columnGap) || 0;
@@ -473,7 +475,7 @@ function widgetPlacementFromPoint(gridElement: HTMLDivElement, widgets: Dashboar
   return normalizeWidgetPlacement({
     ...widget,
     x: clampNumber(Math.floor((clientX - rect.left) / columnStep), 0, gridColumns - widget.w),
-    y: clampNumber(Math.floor((clientY - rect.top) / rowStep), 0, 80)
+    y: clampNumber(Math.floor((clientY - rect.top) / rowStep), 0, maxWidgetY)
   });
 }
 
@@ -1122,7 +1124,7 @@ export function DashboardPage({ onNavigate }: DashboardPageProps) {
 
     const next = dragPreview?.id === widget.id
       ? dragPreview
-      : widgetPlacementFromPoint(gridRef.current, preference.widgets, widget, clientX, clientY);
+      : widgetPlacementFromPoint(gridRef.current, widget, clientX, clientY);
 
     setPreference((current) => ({
       ...current,
@@ -1143,7 +1145,7 @@ export function DashboardPage({ onNavigate }: DashboardPageProps) {
       return;
     }
 
-    setDragPreview(widgetPlacementFromPoint(gridRef.current, preference.widgets, widget, clientX, clientY));
+    setDragPreview(widgetPlacementFromPoint(gridRef.current, widget, clientX, clientY));
   }
 
   function startResize(event: PointerEvent<HTMLButtonElement>, widget: DashboardWidget) {
@@ -1161,7 +1163,7 @@ export function DashboardPage({ onNavigate }: DashboardPageProps) {
     function onMove(moveEvent: globalThis.PointerEvent) {
       updateWidget(widget.id, {
         w: clampNumber(startW + Math.round((moveEvent.clientX - startX) / columnWidth), minSize.w, gridColumns - widget.x),
-        h: clampNumber(startH + Math.round((moveEvent.clientY - startY) / rowHeight), minSize.h, 8)
+        h: clampNumber(startH + Math.round((moveEvent.clientY - startY) / rowHeight), minSize.h, maxWidgetHeight)
       });
     }