From da0d5603018dd4afef330dd8343ac4bbab3fc065 Mon Sep 17 00:00:00 2001 From: Thomas Peterson Date: Wed, 12 Nov 2025 14:08:15 +0100 Subject: [PATCH] Backup --- examples/shadow_simple.php | 24 ++++++++++ src/Ui/Component.php | 96 ++++++++++++++++++++------------------ 2 files changed, 75 insertions(+), 45 deletions(-) create mode 100644 examples/shadow_simple.php diff --git a/examples/shadow_simple.php b/examples/shadow_simple.php new file mode 100644 index 0000000..adc9917 --- /dev/null +++ b/examples/shadow_simple.php @@ -0,0 +1,24 @@ +addComponent($box); + +// Set window content and run +$window->setRoot($mainContainer); +$app->addWindow($window); +$app->run(); diff --git a/src/Ui/Component.php b/src/Ui/Component.php index 909b4df..e72a4f8 100644 --- a/src/Ui/Component.php +++ b/src/Ui/Component.php @@ -403,14 +403,6 @@ abstract class Component Profiler::increment('render_normal'); - // Render shadow if present (before background) - if ( - isset($this->computedStyles[\PHPNative\Tailwind\Style\Shadow::class]) && - ($shadow = $this->computedStyles[\PHPNative\Tailwind\Style\Shadow::class]) - ) { - $this->renderShadow($renderer, $shadow); - } - // Render normally if no cache or cache building if ( isset($this->computedStyles[\PHPNative\Tailwind\Style\Background::class]) && @@ -857,15 +849,16 @@ abstract class Component } // Define shadow properties based on size + // Using fewer layers with proper alpha distribution $shadowProps = match ($shadow->size) { - 'sm' => ['blur' => 1, 'offsetX' => 0, 'offsetY' => 1, 'alpha' => 15], - 'base' => ['blur' => 2, 'offsetX' => 0, 'offsetY' => 2, 'alpha' => 25], - 'md' => ['blur' => 3, 'offsetX' => 0, 'offsetY' => 4, 'alpha' => 30], - 'lg' => ['blur' => 4, 'offsetX' => 0, 'offsetY' => 6, 'alpha' => 35], - 'xl' => ['blur' => 5, 'offsetX' => 0, 'offsetY' => 10, 'alpha' => 40], - '2xl' => ['blur' => 7, 'offsetX' => 0, 'offsetY' => 15, 'alpha' => 50], - 'inner' => ['blur' => 2, 'offsetX' => 0, 'offsetY' => 0, 'alpha' => 20, 'inner' => true], - default => ['blur' => 2, 'offsetX' => 0, 'offsetY' => 2, 'alpha' => 25], + 'sm' => ['blur' => 3, 'spread' => 1, 'offsetX' => 0, 'offsetY' => 1, 'alpha' => 40], + 'base' => ['blur' => 4, 'spread' => 2, 'offsetX' => 0, 'offsetY' => 2, 'alpha' => 45], + 'md' => ['blur' => 6, 'spread' => 3, 'offsetX' => 0, 'offsetY' => 4, 'alpha' => 50], + 'lg' => ['blur' => 8, 'spread' => 5, 'offsetX' => 0, 'offsetY' => 6, 'alpha' => 55], + 'xl' => ['blur' => 10, 'spread' => 7, 'offsetX' => 0, 'offsetY' => 10, 'alpha' => 60], + '2xl' => ['blur' => 15, 'spread' => 10, 'offsetX' => 0, 'offsetY' => 15, 'alpha' => 70], + 'inner' => ['blur' => 4, 'spread' => 2, 'offsetX' => 0, 'offsetY' => 0, 'alpha' => 45, 'inner' => true], + default => ['blur' => 4, 'spread' => 2, 'offsetX' => 0, 'offsetY' => 2, 'alpha' => 45], }; // Get shadow color (default to black/gray if not specified) @@ -891,51 +884,58 @@ abstract class Component $borderRadius = $border->roundTopLeft ?? 0; } - // Render shadow layers (simulate blur with multiple semi-transparent layers) - for ($i = 0; $i < $shadowProps['blur']; $i++) { - $offset = $i; - $layerAlpha = (int) ($shadowColor->alpha / $shadowProps['blur']); + // Render shadow layers (simulate blur with expanding semi-transparent layers) + // Note: Alpha blending is automatic when using alpha values < 255 in sdl_set_render_draw_color + // Render from outermost to innermost for proper blending + for ($i = $shadowProps['blur'] - 1; $i >= 0; $i--) { + // Calculate alpha that decreases towards outer layers (blur effect) + // Innermost layer (i=0) has full alpha, outermost has minimal alpha + $progress = 1.0 - ($i / $shadowProps['blur']); + $layerAlpha = (int) ($shadowProps['alpha'] * $progress); + + // Ensure minimum visibility + if ($layerAlpha < 5) { + $layerAlpha = 5; + } + + // Calculate expansion for blur effect + $expansion = $shadowProps['spread'] * ($i / $shadowProps['blur']); if (isset($shadowProps['inner']) && $shadowProps['inner']) { - // Inner shadow - render inside the element - $shadowX = (int) ($this->viewport->x + $offset); - $shadowY = (int) ($this->viewport->y + $offset); - $shadowWidth = (int) max(0, $this->viewport->width - ($offset * 2)); - $shadowHeight = (int) max(0, $this->viewport->height - ($offset * 2)); + // Inner shadow - render inside the element, shrinking inwards + $shadowX = (int) ($this->viewport->x + $expansion); + $shadowY = (int) ($this->viewport->y + $expansion); + $shadowWidth = (int) max(0, $this->viewport->width - ($expansion * 2)); + $shadowHeight = (int) max(0, $this->viewport->height - ($expansion * 2)); } else { - // Outer shadow - render behind the element - $shadowX = (int) ($this->viewport->x + $shadowProps['offsetX'] + $offset); - $shadowY = (int) ($this->viewport->y + $shadowProps['offsetY'] + $offset); - $shadowWidth = (int) $this->viewport->width; - $shadowHeight = (int) $this->viewport->height; + // Outer shadow - expand outwards from element + $shadowX = (int) ($this->viewport->x + $shadowProps['offsetX'] - $expansion); + $shadowY = (int) ($this->viewport->y + $shadowProps['offsetY'] - $expansion); + $shadowWidth = (int) ($this->viewport->width + ($expansion * 2)); + $shadowHeight = (int) ($this->viewport->height + ($expansion * 2)); } - // Skip if shadow is too small - if ($shadowWidth <= 0 || $shadowHeight <= 0) { + // Skip if shadow is too small or alpha is too low + if ($shadowWidth <= 0 || $shadowHeight <= 0 || $layerAlpha < 1) { continue; } - sdl_set_render_draw_color( - $renderer, - $shadowColor->red, - $shadowColor->green, - $shadowColor->blue, - $layerAlpha, - ); if ($borderRadius > 0 && $border !== null) { - // Render rounded shadow + // Render rounded shadow with expanding border radius $x2 = $shadowX + $shadowWidth; $y2 = $shadowY + $shadowHeight; + $radiusExpansion = $expansion / 2; + sdl_rounded_box_ex( $renderer, $shadowX, $shadowY, $x2, $y2, - $border->roundTopLeft ?? 0, - $border->roundTopRight ?? 0, - $border->roundBottomRight ?? 0, - $border->roundBottomLeft ?? 0, + (int) (($border->roundTopLeft ?? 0) + $radiusExpansion), + (int) (($border->roundTopRight ?? 0) + $radiusExpansion), + (int) (($border->roundBottomRight ?? 0) + $radiusExpansion), + (int) (($border->roundBottomLeft ?? 0) + $radiusExpansion), $shadowColor->red, $shadowColor->green, $shadowColor->blue, @@ -943,7 +943,13 @@ abstract class Component ); } else { // Render rectangular shadow - error_log(sprintf('%s,%s,%s,%s', $shadowX, $shadowY, $shadowWidth, $shadowHeight)); + sdl_set_render_draw_color( + $renderer, + $shadowColor->red, + $shadowColor->green, + $shadowColor->blue, + $layerAlpha, + ); sdl_render_fill_rect($renderer, [ 'x' => $shadowX, 'y' => $shadowY,