I have this in mind. As you can see in source. I would like to separate calculations and rendering. cssbase.pas only parse css and do layout position. This must be without any dependencies. So we can use this to layout Android, etc controls or in any target. Now I'm starting to work on basic shape (poly path) generation for background, corners (rounded, non same border widths), etc. There will be final paths to render.
Some cases we can't render using standard TCanvas, or rendering is not smooth (rounded corners). But I would like to do this (only basic rounding). As you can see in attachment. My Idea (for TCanvas) painting is divide required parts into TBitmaps and paint this parts with 4x or 8x size and than scale it down to do some "antialiasing". This is good for example when I create TPanel with CSS support and TPanel is HUGE in size and too often overlayed with many controls and we need paint only 4 small corners
.
Please look at THTTPFa implementation. SVG (using BGRABitmap) implementation can be similar.
I don't know if will be better to do some support for rendering engine (TRenderLCL, TRenderBGRA ...) or create separate controls (TBGRACssShape ..). Some cases Can't be implemented without advanced renderer. So example Transform, Blur etc. And this enhanced renderer will be cool for as you mentioned SVG support or shadow blur etc. for "smaller" controls . etc. In my point of view this will be nice to have.
I would like to combine LCL with CSS in many cases:
1. Only "style" support as
TCSSButton.CSS.InlineStyle := 'color:red;margin:30px;';
TCSSButton.ApplyStyle; //-> this will use CSS as parameters for LCL control -> Self.Font.Color := clRed; Self.BorderSpacing.Left := 30px; Self.BorderSpacing.Right := 30px; ...
2. layouter
TCSSPanel.CSS.InlineStyle := 'display:flex'; // -> Panel have custom AlignControls and
3. OnPaint replacement in any LCL control
TListBoxItem for example. Use CSS layout and css rendering to Measure Height, and in OnPaint to render.
4. Enhanced control (like in source code is TCSSShape)
5. As Helper for custom Controls
For example I would like to create TButton with Top text, left Icon, right icon and etc. I can create classic control with "css inside"
TMyCoolButton = class(TCustomButton)
private
Froot,
FLeftIcon,
FRightIcon, FTopText: THtmlNode;
...
procedure CalculatePrefferedSize ( .... )
begin
Froot.LayouTo(AWidth, AHeight);
end;
procedure Paint ( .... ); override;
begin
Froot.PaintTo(Self.Canvas, ClientRect);
end;
procedure SetIconColor(AValue: TColor);
begin
FLeftIcon.InlineStyle := 'color:#' + LCLToHtml(AValue);
FRoot.Changed;
end;
published
property TopText: String read ... write ;
property LeftIconColor: TColor read write ;
6. etc