This commit is contained in:
Thomas Peterson 2025-11-14 21:12:46 +01:00
parent cf9ee67f67
commit 4d91dbb0ee
5 changed files with 210 additions and 159 deletions

View File

@ -17,8 +17,12 @@ final class KanbanTaskCard extends Container
private readonly string $boardId,
private readonly array $task,
private KanbanBoardView $boardView,
bool $selected = false,
) {
parent::__construct('bg-white border border-gray-200 rounded shadow px-3 py-2 cursor-pointer');
$baseStyle = 'bg-white border rounded px-3 py-2 shadow cursor-pointer';
$style = $selected ? ($baseStyle . ' border-blue-500 bg-blue-50') : ($baseStyle . ' border-gray-200');
parent::__construct($style);
$title = new Label($task['title'], 'text-sm text-black');
$this->addComponent($title);
@ -33,7 +37,49 @@ final class KanbanTaskCard extends Container
return false;
}
$this->boardView->beginDrag($this->boardId, $this->task);
$this->boardView->selectTask($this->boardId, $this->task);
return true;
}
}
final class KanbanBoardHeader extends Container
{
public function __construct(
private readonly string $boardId,
private KanbanBoardView $boardView,
string $title,
int $taskCount,
) {
parent::__construct('flex flex-col gap-1 cursor-pointer');
$this->addComponent(new Label($title, 'text-lg font-bold text-black'));
$this->addComponent(new Label(sprintf('%d Aufgaben', $taskCount), 'text-xs text-gray-700'));
$this->addComponent(new Label('Hierhin verschieben (Klick)', 'text-[10] text-gray-500'));
}
public function handleMouseClick(float $mouseX, float $mouseY, int $button): bool
{
if ($button !== 1) {
return false;
}
// Nur reagieren, wenn der Klick innerhalb des Header-Viewports liegt
$vp = $this->getViewport();
$inside =
$mouseX >= $vp->x &&
$mouseX <= ($vp->x + $vp->width) &&
$mouseY >= $vp->y &&
$mouseY <= ($vp->y + $vp->height);
if (!$inside) {
return false;
}
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log(sprintf('[KanbanHeader] Click on board "%s"', $this->boardId));
}
$this->boardView->moveSelectedToBoard($this->boardId);
return true;
}
}
@ -42,8 +88,8 @@ final class KanbanBoardView extends Container
{
private array $boards;
private array $boardViews = [];
private null|array $dragState = null;
private null|string $hoverBoardId = null;
private null|string $selectedTaskId = null;
private null|string $selectedBoardId = null;
public function __construct(
private readonly string $storagePath,
@ -100,139 +146,41 @@ final class KanbanBoardView extends Container
$this->statusLabel->setText('Board nicht gefunden.');
}
public function beginDrag(string $boardId, array $task): void
public function selectTask(string $boardId, array $task): void
{
$this->dragState = [
'fromBoardId' => $boardId,
'taskId' => $task['id'],
'taskData' => $task,
];
$this->statusLabel->setText('Verschiebe: ' . $task['title']);
$this->selectedBoardId = $boardId;
$this->selectedTaskId = $task['id'];
$msg = sprintf('Ausgewählt: "%s" in "%s"', $task['title'], $this->getBoardTitle($boardId));
$this->statusLabel->setText($msg);
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log('[Kanban] ' . $msg);
}
$this->renderBoards();
}
public function handleMouseMove(float $mouseX, float $mouseY): void
public function moveSelectedToBoard(string $targetBoardId): void
{
parent::handleMouseMove($mouseX, $mouseY);
if ($this->dragState === null) {
return;
}
$target = $this->findBoardAt($mouseX, $mouseY);
if ($target !== $this->hoverBoardId) {
if ($this->hoverBoardId !== null) {
$this->setBoardHighlight($this->hoverBoardId, false);
if ($this->selectedTaskId === null) {
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log('[Kanban] moveSelectedToBoard called without selectedTaskId');
}
if ($target !== null) {
$this->setBoardHighlight($target, true);
$this->statusLabel->setText('Keine Aufgabe ausgewählt.');
return;
}
if ($this->selectedBoardId === $targetBoardId) {
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log('[Kanban] moveSelectedToBoard target is same board');
}
$this->hoverBoardId = $target;
}
}
public function handleMouseRelease(float $mouseX, float $mouseY, int $button): void
{
parent::handleMouseRelease($mouseX, $mouseY, $button);
if ($this->dragState === null || $button !== 1) {
return;
}
$dropTarget = $this->findBoardAt($mouseX, $mouseY);
$this->completeDrag($dropTarget);
}
private function renderBoards(): void
{
$this->clearChildren();
$this->boardViews = [];
foreach ($this->boards as $board) {
$style = 'flex flex-col w-[260] flex-none bg-white border border-black rounded-lg p-3 gap-2';
$column = new Container($style);
$column->addComponent(new Label('Board: ' . $board['title'], 'text-lg font-bold text-black'));
$taskTitles = array_map(static fn($t) => $t['title'], $board['tasks']);
$tasksText = empty($taskTitles) ? '(keine Aufgaben)' : implode(', ', $taskTitles);
$column->addComponent(new Label('Tasks: ' . $tasksText, 'text-xs text-black'));
if (!empty($board['tasks'])) {
$taskList = new Container('flex flex-col gap-2 mt-2');
foreach ($board['tasks'] as $task) {
$card = new Container('bg-white border-2 border-gray-400 rounded px-2 py-1 shadow-md');
$card->addComponent(new Label($task['title'], 'text-sm text-black'));
$taskList->addComponent($card);
}
$column->addComponent($taskList);
}
$this->addComponent($column);
$this->boardViews[$board['id']] = [
'column' => $column,
'defaultStyle' => $style,
'highlightStyle' => $style,
];
}
}
private function findBoardAt(float $mouseX, float $mouseY): null|string
{
foreach ($this->boardViews as $boardId => $info) {
$viewport = $info['column']->getViewport();
if (
$mouseX >= $viewport->x &&
$mouseX <= ($viewport->x + $viewport->width) &&
$mouseY >= $viewport->y &&
$mouseY <= ($viewport->y + $viewport->height)
) {
return $boardId;
}
}
return null;
}
private function setBoardHighlight(string $boardId, bool $active): void
{
if (!isset($this->boardViews[$boardId])) {
return;
}
$column = $this->boardViews[$boardId]['column'];
$style = $active ? $this->boardViews[$boardId]['highlightStyle'] : $this->boardViews[$boardId]['defaultStyle'];
$column->setStyle($style);
}
private function completeDrag(null|string $targetBoardId): void
{
$state = $this->dragState;
$this->dragState = null;
if ($this->hoverBoardId !== null) {
$this->setBoardHighlight($this->hoverBoardId, false);
$this->hoverBoardId = null;
}
if (!$state) {
return;
}
if ($targetBoardId === null) {
$this->statusLabel->setText('Ziehen abgebrochen.');
return;
}
if ($targetBoardId === $state['fromBoardId']) {
$this->statusLabel->setText('Aufgabe blieb im gleichen Board.');
$this->statusLabel->setText('Aufgabe ist bereits in diesem Board.');
return;
}
$movedTask = null;
foreach ($this->boards as &$board) {
if ($board['id'] === $state['fromBoardId']) {
if ($board['id'] === $this->selectedBoardId) {
foreach ($board['tasks'] as $index => $task) {
if ($task['id'] === $state['taskId']) {
if ($task['id'] === $this->selectedTaskId) {
$movedTask = $task;
array_splice($board['tasks'], $index, 1);
break 2;
@ -242,7 +190,10 @@ final class KanbanBoardView extends Container
}
if ($movedTask === null) {
$this->statusLabel->setText('Aufgabe konnte nicht verschoben werden.');
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log('[Kanban] moveSelectedToBoard: task not found in source board');
}
$this->statusLabel->setText('Ausgewählte Aufgabe konnte nicht gefunden werden.');
return;
}
@ -253,14 +204,71 @@ final class KanbanBoardView extends Container
}
}
// Nach erfolgreichem Verschieben Auswahl zurücksetzen,
// damit weitere Board-Klicks den Task nicht erneut verschieben.
$this->selectedBoardId = null;
$this->selectedTaskId = null;
$this->saveBoards();
$this->renderBoards();
$this->statusLabel->setText(sprintf(
$msg = sprintf(
'"%s" nach "%s" verschoben.',
$movedTask['title'],
$this->getBoardTitle($targetBoardId),
));
);
$this->statusLabel->setText($msg);
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log('[Kanban] ' . $msg);
}
}
private function renderBoards(): void
{
$this->clearChildren();
$this->boardViews = [];
foreach ($this->boards as $board) {
$defaultStyle = 'flex flex-col w-[340] flex-none bg-white border border-gray-300 rounded-2xl p-5 gap-3';
$highlightStyle = 'flex flex-col w-[340] flex-none bg-blue-50 border-2 border-blue-500 rounded-2xl p-5 gap-3';
$column = new Container($defaultStyle);
// Header mit Titel und Task-Anzahl, klickbar als Drop-Ziel
$header = new KanbanBoardHeader($board['id'], $this, $board['title'], count($board['tasks']));
$column->addComponent($header);
// Task-Karten (Buttons) mit Auswahl-Hervorhebung
if (!empty($board['tasks'])) {
$taskList = new Container('flex flex-col gap-3 mt-3');
foreach ($board['tasks'] as $task) {
$isSelected = $this->selectedTaskId === $task['id'];
$style = $isSelected
? 'w-full text-left bg-blue-50 border border-blue-500 rounded-lg px-4 py-3 shadow-md cursor-pointer'
: 'w-full text-left bg-white border border-gray-200 rounded-lg px-4 py-3 shadow-md cursor-pointer';
$button = new Button($task['title'], $style);
$button->setOnClick(function () use ($board, $task): void {
// Debug-Ausgabe in Statuszeile, um Klicks sicher zu sehen
$this->statusLabel->setText(sprintf(
'Task-Klick: "%s" in "%s"',
$task['title'],
$this->getBoardTitle($board['id']),
));
$this->selectTask($board['id'], $task);
});
$taskList->addComponent($button);
}
$column->addComponent($taskList);
}
$this->addComponent($column);
$this->boardViews[$board['id']] = [
'column' => $column,
'defaultStyle' => $defaultStyle,
'highlightStyle' => $highlightStyle,
];
}
}
private function getBoardTitle(string $boardId): string
@ -322,11 +330,11 @@ if (empty($boards)) {
];
file_put_contents($storagePath, json_encode($boards, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE), LOCK_EX);
}
define('DEBUG_EVENTS', true);
$app = new Application();
$window = new Window('Kanban Beispiel', 1200, 800);
$root = new Container('flex flex-col h-full w-full bg-gray-100 gap-4 p-4');
$root = new Container('flex flex-col h-full w-full bg-gray-100 gap-6 p-6');
$title = new Label('Kanban Board', 'text-3xl font-bold text-black');
$subTitle = new Label(
@ -339,6 +347,22 @@ $root->addComponent($subTitle);
$statusLabel = new Label('Bereit.', 'text-sm text-gray-600');
$kanbanView = new KanbanBoardView($storagePath, $boards, $statusLabel);
$scaleInput = new TextInput('Scale (z.B. 1.0 oder 2.0)', 'w-40 border border-gray-300 rounded px-3 py-2 bg-white text-black');
$scaleInput->setOnChange(function (string $value) use ($statusLabel): void {
$value = trim($value);
if ($value === '') {
return;
}
$scale = (float) $value;
if ($scale <= 0.1 || $scale > 4.0) {
$statusLabel->setText('Skalierungsfaktor muss zwischen 0.1 und 4.0 liegen.');
return;
}
putenv('PHPNATIVE_UI_SCALE=' . $scale);
$statusLabel->setText(sprintf('Skalierung gesetzt auf %.2f bitte App neu starten.', $scale));
});
$boardInput = new TextInput('Neues Board', 'flex-1 border border-gray-300 rounded px-3 py-2 bg-white text-black');
$boardAddButton = new Button('Board hinzufügen', 'px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700');
$boardAddButton->setOnClick(function () use ($kanbanView, $boardInput, $statusLabel): void {
@ -347,6 +371,7 @@ $boardAddButton->setOnClick(function () use ($kanbanView, $boardInput, $statusLa
});
$boardRow = new Container('flex flex-row gap-3 items-center');
$boardRow->addComponent($boardInput);
$boardRow->addComponent($scaleInput);
$boardRow->addComponent($boardAddButton);
$root->addComponent($boardRow);

View File

@ -2,6 +2,11 @@
{
"id": "board_691661d89de624.46726087",
"title": "Backlog",
"tasks": []
},
{
"id": "board_691661d89de806.79123800",
"title": "In Arbeit",
"tasks": [
{
"id": "task_691661d89de735.41071535",
@ -15,17 +20,6 @@
}
]
},
{
"id": "board_691661d89de806.79123800",
"title": "In Arbeit",
"tasks": [
{
"id": "task_691661d89de858.46479539",
"title": "API anbinden",
"note": ""
}
]
},
{
"id": "board_691661d89de894.20053237",
"title": "Erledigt",
@ -40,6 +34,12 @@
{
"id": "board_69170bcc2be8c6.34720864",
"title": "asd",
"tasks": []
"tasks": [
{
"id": "task_691661d89de858.46479539",
"title": "API anbinden",
"note": ""
}
]
}
]

View File

@ -131,6 +131,15 @@ class Button extends Container
$mouseY >= $this->viewport->y &&
$mouseY <= ($this->viewport->y + $this->viewport->height)
) {
// Debug-Hook: Klick auf Button
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log(sprintf(
'[Button] Click INSIDE "%s" at (%.1f, %.1f)',
$this->text,
$mouseX,
$mouseY,
));
}
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log("[Button '{$this->text}'] Click INSIDE button - executing callback");
}
@ -147,6 +156,9 @@ class Button extends Container
$task->onError($this->onClickAsync['onError']);
}
} elseif ($this->onClick !== null) { // Call sync onClick callback if set
if (defined('DEBUG_EVENTS') && DEBUG_EVENTS) {
error_log(sprintf('[Button] Executing onClick for "%s"', $this->text));
}
($this->onClick)();
}

View File

@ -638,15 +638,16 @@ class Container extends Component
$adjustedMouseX = $overflow['x'] || $overflow['y'] ? ($mouseX + $this->scrollX) : $mouseX;
$adjustedMouseY = $overflow['x'] || $overflow['y'] ? ($mouseY + $this->scrollY) : $mouseY;
$handled = false;
foreach ($this->children as $child) {
if (method_exists($child, 'handleMouseClick')) {
if ($child->handleMouseClick($adjustedMouseX, $adjustedMouseY, $button)) {
return true;
$handled = true;
}
}
}
return false;
return $handled;
}
public function handleMouseMove(float $mouseX, float $mouseY): void

View File

@ -17,6 +17,7 @@ class Window
private Viewport $viewport;
private bool $shouldBeReLayouted = true;
private float $pixelRatio = 1.0;
private float $uiScale = 1.0;
private bool $shouldClose = false;
private $onResize = null;
private $onFpsChange = null;
@ -46,8 +47,8 @@ class Window
$sdlInitialized = true;
}
// Create window with resizable + high pixel density flags to get crisp rendering on HiDPI displays
$flags = SDL_WINDOW_RESIZABLE | SDL_WINDOW_HIGH_PIXEL_DENSITY;
// Create window with resizable flag for normal window decorations
$flags = SDL_WINDOW_RESIZABLE;
$this->window = sdl_create_window($title, $width, $height, $flags);
if (!$this->window) {
@ -71,7 +72,6 @@ class Window
if (!$this->textRenderer->init()) {
error_log('Warning: Failed to initialize text renderer. Text rendering will not be available.');
}
$this->updatePixelRatio();
// Get actual window size
$size = sdl_get_window_size($this->window);
@ -84,12 +84,29 @@ class Window
height: $this->height,
);
$this->updatePixelRatio();
$this->lastFpsUpdate = microtime(true);
}
private function updatePixelRatio(): void
{
$this->pixelRatio = 1.0;
// HiDPIScaling ist optional und wird nur aktiviert,
// wenn die Umgebungsvariable PHPNATIVE_ENABLE_HIDPI=1 gesetzt ist.
$enableHiDpi = getenv('PHPNATIVE_ENABLE_HIDPI');
if ($enableHiDpi !== '1') {
if ($this->textRenderer) {
$this->textRenderer->setPixelRatio($this->pixelRatio);
}
return;
}
if (!function_exists('sdl_get_window_size') || !$this->window) {
return;
}
$windowSize = sdl_get_window_size($this->window);
$pixelSize = null;
@ -97,10 +114,7 @@ class Window
$pixelSize = sdl_get_window_size_in_pixels($this->window);
}
if (
(!is_array($pixelSize) || count($pixelSize) < 2) &&
function_exists('sdl_get_renderer_output_size')
) {
if ((!is_array($pixelSize) || count($pixelSize) < 2) && function_exists('sdl_get_renderer_output_size')) {
$pixelSize = sdl_get_renderer_output_size($this->renderer);
}
@ -122,10 +136,6 @@ class Window
if ($this->textRenderer) {
$this->textRenderer->setPixelRatio($this->pixelRatio);
}
if (function_exists('sdl_set_render_scale')) {
sdl_set_render_scale($this->renderer, $this->pixelRatio, $this->pixelRatio);
}
}
public function getPixelRatio(): float
@ -133,6 +143,11 @@ class Window
return $this->pixelRatio;
}
public function getUiScale(): float
{
return $this->uiScale;
}
public function setRoot(Component $component): self
{
if ($this->rootComponent !== null) {
@ -248,13 +263,11 @@ class Window
$this->width = $newWidth;
$this->height = $newHeight;
// Update text renderer framebuffer
// Update text renderer framebuffer / DPI
if ($this->textRenderer && $this->textRenderer->isInitialized()) {
$this->textRenderer->updateFramebuffer($newWidth, $newHeight);
}
$this->updatePixelRatio();
$this->viewport->x = 0;
$this->viewport->y = 0;
$this->viewport->windowWidth = $newWidth;