Commit graph

17 commits

Author SHA1 Message Date
Nate Butler
e5943975f9
gpui & ui: Use shader for dashed dividers (#23839)
TODO:
- [x] BackgroundOrientation
- [x] PatternDash
- [x] `pattern_horizontal_dash` & `pattern_vertical_dash`
- [x] Metal dash shader
- [x] Blade dash shader
- [x] Update ui::Divider to use new pattern

---

This PR introduces proper dashed dividers using the new `PatternDash`
background shader.

![CleanShot 2025-01-29 at 09 33
06@2x](https://github.com/user-attachments/assets/2db5af58-1aa9-4ad7-aa52-b9046fbf8584)

Before this we were using 128 elements to create a dashed divider, which
is both expensive, and would not scale beyond a certain size. This
allows us to simplify the divider element as well.

Changes:

- Adds `BackgroundOrientation` to `gpui::color::Background` to allow
specifying a direction for a pattern
- Adds the PatternDash pattern variant
- Updates `ui::Divider`'s dashed variants to be more efficient

Misc:
- Documents the `ui::Divider` component
- Treat `.metal` files as `C` in the Zed project until we get some metal
syntax highlighting.

Release Notes:

- N/A
2025-01-29 12:18:34 -05:00
Nate Butler
23672987ff
gpui: Add support for slash pattern fills (///) (#23576)
TODO:
- [x] Add BackgroundTag::PatternSlash
- [x] Support metal slash pattern fills
- [x] Support blade slash pattern fills
---

Adds support for a new background type in gpui, `pattern_slash`.

Usage:

```rust
div().size(px(56.0)).bg(pattern_slash(gpui::red()))
```
This will create a 56px square with a red slash pattern fill.

You can run the pattern example with `cargo run -p gpui --example
pattern`:

![CleanShot 2025-01-23 at 16 22
09@2x](https://github.com/user-attachments/assets/39d9f8c8-816c-4d3b-bc75-fcc122747e17)

---

After talking with @as-cii at length about how we want to support
patterns in gpui, we decided for now we'll simply add a new
BackgroundTag specific to this pattern.

It isn't the best long term plan however – we'll likely want to
introduce the concept of a `Fill` at some point so we can have
`Fill::Solid`, `Fill::Gradient(LinearGradient)`, etc in the future.

The pattern is designed to seamlessly tile vertically for elements of
the same height. For example, for use in editor line backgrounds:

![CleanShot 2025-01-23 at 16 27
41@2x](https://github.com/user-attachments/assets/d51b94bc-cfc2-4aff-89e3-289a04ea8841)

---


Release Notes:

(do we do gpui release notes?)
- Adds support for slash pattern fills in `gpui`.

---------

Co-authored-by: Antonio Scandurra <me@as-cii.com>
2025-01-28 11:33:34 -05:00
Jason Lee
de89f8cf83
gpui: Add linear gradient support to fill background (#20812)
Release Notes:

- gpui: Add linear gradient support to fill background

Run example:

```
cargo run -p gpui --example gradient
cargo run -p gpui --example gradient --features macos-blade
```

## Demo

In GPUI (sRGB):

<img width="761" alt="image"
src="https://github.com/user-attachments/assets/568c02e8-3065-43c2-b5c2-5618d553dd6e">

In GPUI (Oklab):

<img width="761" alt="image"
src="https://github.com/user-attachments/assets/b008b0de-2705-4f99-831d-998ce48eed42">

In CSS (sRGB): 

https://codepen.io/huacnlee/pen/rNXgxBY

<img width="505" alt="image"
src="https://github.com/user-attachments/assets/239f4b65-24b3-4797-9491-a13eea420158">

In CSS (Oklab):

https://codepen.io/huacnlee/pen/wBwBKOp

<img width="658" alt="image"
src="https://github.com/user-attachments/assets/56fdd55f-d219-45de-922f-7227f535b210">


---

Currently only support 2 color stops with linear-gradient. I think this
is we first introduce the gradient feature in GPUI, and the
linear-gradient is most popular for use. So we can just add this first
and then to add more other supports.
2024-12-11 21:52:52 +02:00
ensi
3ac201e448
gpui: Improve underline appearance (#17586) 2024-09-18 09:32:37 -04:00
Jason Lee
a092ff0c4f
gpui: Add opacity to support transparency of the entire element (#17132)
Release Notes:

- N/A

---

Add this for let GPUI element to support fade in-out animation.

## Platform test

- [x] macOS
- [x] blade `cargo run -p gpui --example opacity --features macos-blade`

## Usage

```rs
div()
    .opacity(0.5)
    .bg(gpui::black())
    .text_color(gpui::black())
    .child("Hello world")
```

This will apply the `opacity` it self and all children to use `opacity`
value to render colors.

## Example

```
cargo run -p gpui --example opacity
cargo run -p gpui --example opacity --features macos-blade
```

<img width="612" alt="image"
src="https://github.com/user-attachments/assets/f1da87ed-31f5-4b55-a023-39e8ee1ba349">
2024-09-04 12:53:45 +02:00
Son
f24f601e05
Adjust erf estimation function (#15423)
Release Notes:

- Fixed a (potential) small error in erf estimation. Technically, the
error is negligible.

I am not sure where the current calculation for erf come from and if it
is intended or a simple mistake. However it looks slightly different
from the official calculation, notably
[this](https://en.wikipedia.org/wiki/Error_function#Approximation_with_elementary_functions)
from Wikipedia.

I will add a comment if it is intended.
2024-08-07 14:12:26 +02:00
jansol
ba26acc1ed
blade: Fix display of straight underlines (#11818)
Fixes: #11715

(also apply alpha of the color to wavy ones while we're at it)

Release Notes:

- Fixed display of straight underlines when using the blade renderer
(#11715)
2024-05-14 18:03:43 -07:00
Dzmitry Malyshau
a89dc8c42e
blade: Switch to linear color space (#11534)
Release Notes:

- N/A

## What

Addresses a long-standing issue of doing the blending operations in sRGB
space. Currently, the input HSL colors are provided in sRGB space and
converted to linear in the vertex shader. Conversion back to sRGB, which
is required on most platforms today, happens at the very end of the
pipeline when writing into sRGB render target.

Note-1: in the future we may consider doing HSL -> sRGB -> Linear
transform on CPU before feeding into shaders. However, I don't expect
any significant difference here given that we are likely bound by fill
rate and pixel shaders, anyway.

Note-2: the graphics stack is programmed to detect if the platform
supports presenting in linear color space and avoids converting to sRGB
at the end in this case. However, on my Z13 laptop this isn't supported
by the RADV driver.

Closes #7684 
Closes #11462
@jansol please confirm if you can!

## Comparison

Screenshot of the Glazier theme before the change:

![glazier-old](https://github.com/zed-industries/zed/assets/107301/6a9552e1-0819-4a4e-8121-8d62ec012bf4)
Same theme after the change:

![glazier-new](https://github.com/zed-industries/zed/assets/107301/4e61c422-4a4b-4c4b-84a3-55680626d681)
2024-05-08 12:47:29 -07:00
jansol
d6a6330419
gpui/blade: add alpha handling for non-rounded quads (#11461)
Fixes
https://github.com/zed-industries/zed/pull/10973#issuecomment-2096586316

Release Notes:

- N/A
2024-05-06 14:38:00 -07:00
Dzmitry Malyshau
e4f13dd561
Blade window transparency (#10973)
Release Notes:

- N/A

Following up to #10880
TODO:
- [x] create window as transparent
  - [x] X11
  - [x] Wayland
  - [ ] Windows
  - [x] MacOS (when used with Blade)  
- [x] enable GPU surface transparency
- [x] adjust the pipeline blend modes
- [x] adjust shader outputs


![transparency2](https://github.com/zed-industries/zed/assets/107301/d554a41b-5d3f-4420-a857-c64c1747c2d5)

Blurred results from @jansol (on Wayland), who contributed to this work:


![zed-blur](https://github.com/zed-industries/zed/assets/107301/a6822171-2dcf-4109-be55-b75557c586de)

---------

Co-authored-by: Jan Solanti <jhs@psonet.com>
2024-05-06 09:53:08 -07:00
Mikayla Maki
fd0071f2af
Add an animation to the LSP checking indicator (#9463)
Spinner go spinny.

Extra thanks to @kvark for helping me with the shaders.



https://github.com/zed-industries/zed/assets/2280405/9d5f4f4e-0d43-44d2-a089-5d69939938e9


Release Notes:

- Added a spinning animation to the LSP checking indicator

---------

Co-authored-by: Dzmitry Malyshau <kvark@fastmail.com>
2024-03-19 10:16:18 -07:00
Mikayla Maki
487ae73bcc
Fix sharp corners on images (#9408)
Release Notes:

- N/A
2024-03-15 10:22:32 -07:00
Matthias Grandl
b38e3f16ad
gpui: img element object-fit (#9393)
Release Notes:

- Added [object-fit
API](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) to the
`img` element. This allows the user to decide how the image is scaled
within the element bounds.
- Fixes corner radius not working as expected on overflowing elements.
2024-03-15 10:06:07 -07:00
白山風露
2244419dfd
Add missed pad (#9175)
Sorry I missed explicitly `Quad::pad` insertion at #9172.

The struct layout is unchanged and does not affect the behavior.

Release Notes:

- N/A
2024-03-11 08:21:52 -07:00
白山風露
eb5e18c66d
Fix blade validation failure (#9172)
Fix: #9167

Release Notes:

- N/A
2024-03-11 08:06:20 -07:00
Dzmitry Malyshau
9fcda5a5ac
blade: quad render fast path (#8110)
Ported from #7231

Release Notes:
- N/A
2024-02-21 10:04:24 -08:00
Dzmitry Malyshau
9ad1862f2f
Enable Blade on MacOS via "macos-blade" feature (#7669)
Depends on https://github.com/zed-industries/font-kit/pull/2 and
https://github.com/kvark/blade/pull/77

This change enables Blade to be also used on MacOS. It will also make it
easier to use it on Windows.

What works: most of the things. Zed loads as fast and appears equally
responsive to the current renderer.
<img width="306" alt="Screenshot 2024-02-11 at 12 09 15 AM"
src="https://github.com/zed-industries/zed/assets/107301/66d82f45-5ea2-4e2b-86c6-5b3ed333c827">

Things missing:
- [x] video streaming. ~~Requires a bit of plumbing on both Blade and
Zed sides, but all fairly straightforward.~~
  -  verified with a local setup
- [x] resize. ~~Not sure where exactly to hook up the reaction on the
window size change. Once we know where, the fix is one line.~~
- [ ] fine-tune CA Layer
- this isn't a blocker for merging the PR, but it would be a blocker if
we wanted to switch to the new path by default
- [ ] rebase on latest, get the dependency merged (need review/merge of
https://github.com/zed-industries/font-kit/pull/2!)

Update: I implemented resize support as well as "surface" rendering on
the Blade path (which will be useful on Linux/Windows later on). I
haven't tested the latter though - not sure how to get something
streaming. Would appreciate some help! I don't think this should be a
blocker to this PR, anyway.

The only little piece that's missing for the Blade on MacOS path to be
full-featured is fine-tuning the CALayer configuration. Zed does a lot
of careful logic in configuring the layer, such as switching the
"present with transaction" on/off intermittently, which Blade path
doesn't have yet.

Release Notes:
- N/A

---------

Co-authored-by: Mikayla <mikayla@zed.dev>
2024-02-16 13:39:40 -08:00
Renamed from crates/gpui/src/platform/linux/shaders.wgsl (Browse further)