[PR #401] [MERGED] feat(core): add opacity property to Renderable #1295

New issue

Closed

opened 2026-03-14 09:29:01 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:29:01 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/401
Author: @muhammedaksam
Created: 12/10/2025
Status: ✅ Merged
Merged: 12/11/2025
Merged by: @kommander

Base: main ← Head: feat/opacity

📝 Commits (4)

97467fa feat(core): add opacity property to Renderable for alpha inheritance (#393)
54b8acc Merge branch 'main' into feat/opacity
8055bc4 feat: include buffer opacity in hasAlpha calculation
d35e190 Merge branch 'main' into feat/opacity

📊 Changes

8 files changed (+636 additions, -5 deletions)

View changed files

📝 packages/core/src/Renderable.ts (+46 -2)
📝 packages/core/src/buffer.ts (+20 -0)
➕ packages/core/src/examples/opacity-example.ts (+227 -0)
➕ packages/core/src/tests/opacity.test.ts (+123 -0)
📝 packages/core/src/zig.ts (+36 -0)
📝 packages/core/src/zig/buffer.zig (+49 -3)
📝 packages/core/src/zig/lib.zig (+18 -0)
➕ packages/react/examples/opacity.tsx (+117 -0)

📄 Description

Fixes #393

Summary

Add opacity property (0.0–1.0) to the base Renderable class
Implement opacity stack in the native Zig buffer layer for efficient alpha blending
Nested renderables inherit compounded opacity (parent × child)
Add opacity render commands (pushOpacity / popOpacity) to the render pipeline

Changes

buffer.zig: Add opacity_stack with push/pop/get/clear functions
lib.zig: Add FFI exports for opacity stack operations
zig.ts: Add FFI bindings and RenderLib interface methods
buffer.ts: Add TypeScript wrapper methods
Renderable.ts: Add opacity property, render commands, stack management
examples/opacity-example.ts: Core example with animation
examples/opacity.tsx: React example with animation
tests/opacity.test.ts: Added 8 unit tests

Testing

bun test packages/core/src/tests/opacity.test.ts
bun run packages/core/src/examples/opacity-example.ts
bun run packages/react/examples/opacity.tsx

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/401 **Author:** [@muhammedaksam](https://github.com/muhammedaksam) **Created:** 12/10/2025 **Status:** ✅ Merged **Merged:** 12/11/2025 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `feat/opacity` --- ### 📝 Commits (4) - [`97467fa`](https://github.com/anomalyco/opentui/commit/97467fadb7260602a9f61277526e6e485b30e5ba) feat(core): add opacity property to Renderable for alpha inheritance (#393) - [`54b8acc`](https://github.com/anomalyco/opentui/commit/54b8acc3a6b1edfa2cc1b0da7f34a92efa961773) Merge branch 'main' into feat/opacity - [`8055bc4`](https://github.com/anomalyco/opentui/commit/8055bc4e04ffdb9f81be04a48da53a83806d737c) feat: include buffer opacity in `hasAlpha` calculation - [`d35e190`](https://github.com/anomalyco/opentui/commit/d35e190bf0bb9b981a886e889ed87543e2905784) Merge branch 'main' into feat/opacity ### 📊 Changes **8 files changed** (+636 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/Renderable.ts` (+46 -2) 📝 `packages/core/src/buffer.ts` (+20 -0) ➕ `packages/core/src/examples/opacity-example.ts` (+227 -0) ➕ `packages/core/src/tests/opacity.test.ts` (+123 -0) 📝 `packages/core/src/zig.ts` (+36 -0) 📝 `packages/core/src/zig/buffer.zig` (+49 -3) 📝 `packages/core/src/zig/lib.zig` (+18 -0) ➕ `packages/react/examples/opacity.tsx` (+117 -0) </details> ### 📄 Description Fixes #393 ## Summary - Add `opacity` property (0.0–1.0) to the base `Renderable` class - Implement opacity stack in the native Zig buffer layer for efficient alpha blending - Nested renderables inherit compounded opacity (parent × child) - Add opacity render commands (`pushOpacity` / `popOpacity`) to the render pipeline ## Changes - `buffer.zig`: Add `opacity_stack` with push/pop/get/clear functions - `lib.zig`: Add FFI exports for opacity stack operations - `zig.ts`: Add FFI bindings and `RenderLib` interface methods - `buffer.ts`: Add TypeScript wrapper methods - `Renderable.ts`: Add `opacity` property, render commands, stack management - `examples/opacity-example.ts`: Core example with animation - `examples/opacity.tsx`: React example with animation - `tests/opacity.test.ts`: Added 8 unit tests ## Testing ```bash bun test packages/core/src/tests/opacity.test.ts bun run packages/core/src/examples/opacity-example.ts bun run packages/react/examples/opacity.tsx ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>