Apus.Engine.DefaultStyle.pas

// Default UI style (0) inspired by CSS
//
// Copyright (C) 2022 Apus Software (ivan@apus-software.com)
// This file is licensed under the terms of BSD-3 license (see license.txt)
// This file is a part of the Apus Game Engine (http://apus-software.com/engine/)

unit Apus.Engine.DefaultStyle;
interface
uses Apus.Core, Apus.Engine.Types, Apus.Engine.API, Apus.Engine.UI;
 type
  // Resolved text parameters. Extensions never share the private style context.
  TUITextStyle=record
   font:TFontHandle;
   color:cardinal;
   align:TTextAlignment;
   options:cardinal;
   shadowColor:cardinal;
   shadowX,shadowY:single;
   ofsX,ofsY:single; // screen pixels
   hover,pressed,disabled:single; // transition progress
  end;

 // Retain the standard skin/focus/transitions while optionally replacing caption.
 procedure DrawDefaultUI(element:TUIElement;drawButtonCaption:boolean=true);
 function ResolveUITextStyle(element:TUIElement;defColor:cardinal;
   defAlign:TTextAlignment=taLeft;defOptions:cardinal=0;
   defHoverColor:cardinal=0;defDisabledColor:cardinal=0;defPressOfsY:single=0):TUITextStyle;
 procedure WriteUIText(const style:TUITextStyle;x,y:single;const text:String8;targetWidth:integer=0);

 var
  defaultBtnColor:cardinal=$FFB0A0C0;

implementation
 uses Apus.Types, Apus.Images, SysUtils, Types, Apus.Tweenings,
    Apus.Colors, Apus.EventMan, Apus.Geom2D,
    Apus.Engine.UITypes, Apus.Engine.UIWidgets, Apus.Engine.UIRender,
    Apus.Engine.Style, // ParseStyleColor/Number for compound values (text-shadow)
    Apus.Lib, Apus.Utils, Apus.Strings;

 var
  hintImage,tickImage:TTexture;
  //imgHash:TObjectMap;  // hash of loaded images: filename -> TTexture
  unsupportedImageSources:Strings8; // already reported to the log

  blendModeChanged:boolean;

 type
  TContext=class
   disabled:TTweening;
   hover:TTweening;
   active:TTweening;
   skinned:boolean; // set by the box path: a background-image was drawn this frame
   destructor Destroy; override;
   constructor Create(element:TUIElement);
   procedure Update(element:TUIElement);
   function HoverState(element:TUIElement):byte;
   // Resolve a 'background-image' value to a texture. 'file:' textures are loaded once
   // and memoized (the context holds one reference each); 'tex:' ones are looked up
   // every call and never owned (the creator of a named texture keeps it alive)
   function GetImage(const src:String8):TTexture;
  private
   imgSrc:array of String8;  // memo: source string -> texture (small, linear)
   imgTex:array of TTexture; // one reference per entry, released in the destructor
  end;

 function PrepareContext(element:TUIElement):TContext;
  begin
   if element.styleContext<>nil then begin
    if element.styleContext is TContext then exit(TContext(element.styleContext));
    element.StyleContext.Free;
   end;
   result:=TContext.Create(element);
   element.styleContext:=result;
  end;

 procedure SetProperBlendMode(element:TUIElement);
  begin
   if transpBgnd and (element.shape<>TUIShape.shapeEmpty) then begin
    gfx.target.BlendMode(blMove);
    blendModeChanged:=true;
   end;
  end;

 procedure RestoreBlendMode;
  begin
   if blendModeChanged then begin
    gfx.target.BlendMode(blAlpha);
    blendModeChanged:=false;
   end;
  end;

 // styleinfo="00000000 11111111 22222222 33333333" - list of colors (hex)
{ function GetStyleColor(control:TUIElement;index:integer=0):cardinal;
  var
   i,v:integer;
  begin
   result:=0;
   for i:=1 to length(control.styleinfo) do begin
    if control.styleinfo[i]<'0' then begin
     dec(index);
     if index<0 then exit;
     continue;
    end;
    if index=0 then begin
     v:=(ord(control.styleinfo[i]) and $1F)-$10;
     if v<0 then inc(v,25);
     result:=result shl 4+v;
    end;
   end;
  end;}


 // Get font handle from element's style cascade. The UI scale (DPI included) reaches the text
 // through element.globalScale only, so the text scale of the calling thread is ignored
 function StyleFont(element:TUIElement):TFontHandle;
  var name:String8; size:single;
  begin
   name:=element.GetStyleValue('font','Default');
   size:=element.GetStyleNumber('font-size',9);
   result:=txt.GetFont(name,round(size*element.globalScale),fsIgnoreScale);
  end;

 type
  // Content (text) style of an element, resolved for its current state.
  // Offsets are screen pixels (logical style units multiplied by globalScale).
  TTextStyle=TUITextStyle;

 // Resolve the content keys for the element's current state: font, color, text-align,
 // text-decoration, text-shadow, text-offset-x/y. Colors and offsets are tweened through
 // the state values (like the box path); align, decoration and shadow switch instantly.
 // defHoverColor/defDisabledColor - drawer defaults for those states (0 = keep the base
 // color); defPressOfsY - default caption shift while pressed (data can override it).
 function ResolveTextStyle(element:TUIElement;context:TContext;defColor:cardinal;
    defAlign:TTextAlignment=taLeft;defOptions:cardinal=0;
    defHoverColor:cardinal=0;defDisabledColor:cardinal=0;defPressOfsY:single=0):TTextStyle;
  var
   scale:single;
   st:String8;
   parts:Strings8;
   i,n:integer;
  procedure BlendColor(const state:String8;v:single;defC:cardinal);
   begin
    if v<=0 then exit;
    if defC=0 then defC:=result.color;
    result.color:=Color.Mix(result.color,element.GetStateStyleColor(state,'color',defC),v);
   end;
  procedure BlendOffset(const state:String8;v,defY:single);
   begin
    if v<=0 then exit;
    result.ofsX:=Lerp(result.ofsX,element.GetStateStyleNumber(state,'text-offset-x',result.ofsX),v);
    result.ofsY:=Lerp(result.ofsY,element.GetStateStyleNumber(state,'text-offset-y',result.ofsY+defY),v);
   end;
  begin
   scale:=element.globalScale;
   result.font:=StyleFont(element);
   result.hover:=context.hover.Value;
   result.pressed:=context.active.Value;
   result.disabled:=context.disabled.Value;
   result.options:=defOptions;
   result.shadowColor:=0;
   result.shadowX:=1; result.shadowY:=1;
   // Base values (states are blended in, so the base must ignore them)
   result.color:=element.GetBaseStyleColor('color',defColor);
   result.ofsX:=element.GetBaseStyleNumber('text-offset-x');
   result.ofsY:=element.GetBaseStyleNumber('text-offset-y');
   BlendColor('hover',context.hover.Value,defHoverColor);
   BlendColor('pressed',context.active.Value,0);
   BlendColor('disabled',context.disabled.Value,defDisabledColor);
   BlendOffset('hover',context.hover.Value,0);
   BlendOffset('pressed',context.active.Value,defPressOfsY);
   BlendOffset('disabled',context.disabled.Value,0);
   // Alignment: the style overrides the drawer's default (e.g. TUILabel.align)
   result.align:=defAlign;
   st:=element.GetStyleValue('text-align');
   if st<>'' then
    if SameText(st,'left') then result.align:=taLeft else
    if SameText(st,'center') then result.align:=taCenter else
    if SameText(st,'right') then result.align:=taRight else
    if SameText(st,'justify') then result.align:=taJustify;
   // Decoration
   st:=element.GetStyleValue('text-decoration');
   if SameText(st,'underline') then result.options:=result.options or toUnderline else
   if SameText(st,'none') then result.options:=result.options and not toUnderline;
   // Shadow: '<color> [dx dy]' or 'none'; an explicit shadow replaces the built-in one
   st:=element.GetStyleValue('text-shadow');
   if st<>'' then begin
    result.options:=result.options and not toWithShadow;
    if not SameText(st,'none') then begin
     parts:=st.Split(' ');
     n:=0;
     for i:=0 to high(parts) do
      if parts[i].Trim<>'' then begin
       parts[n]:=parts[i].Trim; inc(n);
      end;
     if n>0 then result.shadowColor:=ParseStyleColor(parts[0]);
     if n>=3 then begin
      result.shadowX:=ParseStyleNumber(parts[1]);
      result.shadowY:=ParseStyleNumber(parts[2]);
     end;
    end;
   end;
   result.ofsX:=result.ofsX*scale;
   result.ofsY:=result.ofsY*scale;
   result.shadowX:=result.shadowX*scale;
   result.shadowY:=result.shadowY*scale;
  end;

 // Anchor point matching ts.align inside a horizontal span (x2 = inclusive right edge)
 function AlignAnchor(const ts:TTextStyle;x1,x2:integer):single;
  begin
   case ts.align of
    taRight:result:=x2;
    taCenter:result:=(x1+x2)/2;
    else result:=x1;
   end;
  end;

 // Draw text with a resolved content style: offsets, shadow layer and options included.
 // x matches ts.align (left edge / center / right edge), y is the baseline.
 procedure WriteStyled(const ts:TTextStyle;x,y:single;const st:String32;targetWidth:integer=0); overload;
  begin
   x:=x+ts.ofsX; y:=y+ts.ofsY;
   if ts.shadowColor<>0 then
    txt.WriteW(ts.font,x+ts.shadowX,y+ts.shadowY,ts.shadowColor,st,ts.align,ts.options,targetWidth);
   txt.WriteW(ts.font,x,y,ts.color,st,ts.align,ts.options,targetWidth);
  end;

 procedure WriteStyled(const ts:TTextStyle;x,y:single;const st:String8;targetWidth:integer=0); overload;
  begin
   x:=x+ts.ofsX; y:=y+ts.ofsY;
   if ts.shadowColor<>0 then
    txt.Write(ts.font,x+ts.shadowX,y+ts.shadowY,ts.shadowColor,st,ts.align,ts.options,targetWidth);
   txt.Write(ts.font,x,y,ts.color,st,ts.align,ts.options,targetWidth);
  end;

 // Resolve an image reference used by style values and TUIImage.src:
 //   tex:<name>  - registered texture (TTexture.FindByName); weak reference: the
 //                 creator of the texture keeps it alive, nothing to free
 //   file:<name> - image file via LoadImage: the first user loads it, later users share
 //                 the same texture; the caller owns one reference (FreeImage when done)
 //   none or ''  - no image (e.g. to cancel an image set by a named style)
 // Returns nil if the reference can't be resolved (yet). An unsupported source is
 // reported to the log once per distinct value.
 function ResolveStyleImage(const src:String8):TTexture;
  var
   i:integer;
  begin
   result:=nil;
   if (src='') or SameText(src,'none') then exit;
   if src.StartsWith('tex:',true) then
    result:=TTexture(TTexture.FindByName(copy(src,5,200)))
   else
   if src.StartsWith('file:',true) then
    LoadImage(result,copy(src,6,200))
   else begin
    for i:=0 to high(unsupportedImageSources) do
     if unsupportedImageSources[i]=src then exit;
    i:=length(unsupportedImageSources);
    SetLength(unsupportedImageSources,i+1);
    unsupportedImageSources[i]:=src;
    Log.Warn('Unsupported image source: '+src);
   end;
  end;

 procedure DrawUIElement(element:TUIElement;x1,y1,x2,y2:integer;context:TContext);
  var
   ts:TTextStyle;
  begin
   if (element.caption<>'') and (element.ClassType=TUIElement) then begin
    ts:=ResolveTextStyle(element,context,$FF808080,taCenter,toWithShadow);
    WriteStyled(ts,AlignAnchor(ts,x1,x2),(y1+y2)/2,Str32(element.caption));
   end;
  end;

 procedure BuildSimpleHint(hnt:TUIHint);
  var
   lines:Strings8;
   i,h,iWidth,iHeight,dw,lw:integer;
   font:TFontHandle;
  begin
   font:=StyleFont(hnt);
   if font=0 then font:=defaultHintFont;
   if font=0 then font:=txt.GetFont('Default',7);
   with hnt do begin
    // line breaks: '~' or a literal '\n' sequence -> a real newline char.
    hnt.simpleText:=StringReplace(hnt.simpleText,'\n',#10,[rfReplaceAll]);
    hnt.simpleText:=StringReplace(hnt.simpleText,'~',#10,[rfReplaceAll]);
    lines:=hnt.simpleText.Split(#10);
    h:=round(txt.Height(font)*1.5);
    iHeight:=h*length(lines)+9;
    iWidth:=0;
    for i:=0 to high(lines) do begin
     lw:=txt.Measure(font,lines[i],toComplexText).Width; // SML-aware width via the real layout path
     if iWidth<lw then iWidth:=lw;
    end;
    dw:=txt.Width(font,'M');
    inc(iWidth,4+dw);
    if (hintImage=nil) or (hintImage.width<>iWidth) or (hintImage.height<>iHeight) then begin
     Log.Debug('[Re]alloc hint image');
     if HintImage<>nil then FreeImage(HintImage);
     hintImage:=AllocImage(iWidth,iHeight,pfRenderTargetAlpha,aiTexture+aiRenderTarget,'UI_HintImage');
     if hintImage=nil then
       raise EError.Create('Failed to alloc hint image!');
    end;
    size.Init(iWidth/globalScale,iHeight/globalScale);
    gfx.BeginPaint(hintImage);
    try
     gfx.target.Mask(true,true); // may potentially break drawing of the following elements
     gfx.target.Clear(0,-1,-1);
     draw.FillGradrect(0,0,iwidth-3,iheight-3,$FFFFFFD0,$FFE0E0A0,true);
     draw.Rect(0,0,iwidth-3,iheight-3,$FF000000);
     // shadow
     draw.Line(1,iHeight-2,iwidth-2,iheight-2,$50000000);
     draw.Line(iwidth-2,iheight-2,iwidth-2,0.5,$50000000);
     draw.Line(2,iHeight-1,iwidth-1,iheight-1,$28000000);
     draw.Line(iwidth-1,iheight-2,iwidth-1,1.5,$28000000);
     gfx.target.UnMask;
     // rich text: SML markup ({B}, {C=...}, ...) is honored; default color $D0000000 unless overridden by {C=...}
     for i:=0 to high(lines) do
      txt.Write(font,1+dw div 2,round(2+h div 7+(i+0.75)*h),$D0000000,lines[i],taLeft,toComplexText);
    finally
     gfx.EndPaint;
    end;
   end;
  end;

 procedure AdjustHint(scrX,scrY:integer;hnt:TUIHint);
  var
   pnt:TVec2;
   remainer:single;
  begin
   with hnt do begin
    adjusted:=true;
    pnt.x:=scrX+(5+size.x)*globalscale; // right side in screen coordinates
    pnt.y:=scrY+(12+size.y)*globalScale; // bottom in screen coordinates
    // Adjust Y
    remainer:=window.canvasHeight-pnt.y;
    if remainer<0 then begin
     position.y:=position.y-size.y;
    end else
     position.y:=position.y+12;
    // Adjust X
    remainer:=window.canvasWidth-pnt.x;
    if remainer<0 then begin
     pnt.x:=scrX+remainer;
     pnt:=parent.TransformFromScreen(pnt);
     position.x:=pnt.x;
    end else
     position.x:=position.x+5;
   end;
  end;

 procedure DrawUIHint(control:TUIHint;x1,y1,x2,y2:integer);
  var
   v:integer;
   c:cardinal;
   savePos:TVec2;
  begin
    with control as TUIHint do begin
     if pfRenderTargetAlpha=ipfNone then exit;
     if not adjusted then begin
      // initialize hint contents before the first draw
      Log.Debug('InitHint '+inttohex(UIntPtr(control),SizeOf(UIntPtr)*2));
      if not active then try
       BuildSimpleHint(control as TUIHint);
      except
       on e:exception do begin
        Log.Msg('Failed to build simple hint - deleted');
        control.flags.visible:=false;
        exit;
       end;
      end;
      // adjust the on-screen position (so it is always visible)
      savePos:=position;
      AdjustHint(x1,y1,control as TUIHint);
      savePos.Sub(position);
      inc(x1,round(savepos.x));
      inc(y1,round(savepos.y));
      control.globalRect:=control.GetPosOnScreen;
      x1:=control.globalRect.Left;
      y1:=control.globalRect.Top;
     end;
     if not hiding then
      v:=(CoreTime.Ticks-created)*2
     else begin
      v:=256-(CoreTime.Ticks-created) div 2;
      if v<=0 then begin
        {FreeImage(HintImage);
        HintImage:=nil;}
        control.flags.visible:=false;
        exit;
      end;
     end;
     if hintImage=nil then begin
      Log.Force('Hint has no image! '+inttohex(UIntPtr(control),SizeOf(UIntPtr)*2));
      exit;
     end;
     if v>256 then v:=256;
     c:=Color.Scale(clNeutral,v/256);
     gfx.clip.Nothing;
     draw.Image(x1,y1,HintImage,c);
     gfx.clip.Restore;
    end;
  end;

 procedure DrawUILabel(control:TUILabel;x1,y1,x2,y2:integer;context:TContext);
  var
   mY,targetWidth:integer;
   wst:String32;
   r:TRect;
   ts:TTextStyle;
  begin
   // control.align is the default: 'text-align' in the style overrides it
   ts:=ResolveTextStyle(control,context,$FF808080,control.align);
   with control do begin
     r:=GetClientPosOnScreen;
     gfx.clip.Rect(r);
     mY:=round((r.top+r.bottom)*0.5+txt.Height(ts.font)*0.45)-verticalOffset;
     wst:=Str32(caption);
     if ts.align=taJustify then targetWidth:=r.Width
      else targetWidth:=0;
     WriteStyled(ts,AlignAnchor(ts,r.left,r.Right-1),mY,wst,targetWidth);
     gfx.clip.Restore;
    end;
  end;

 procedure DrawUICheckbox(element:TUICheckbox;x1,y1,x2,y2:integer);
  const
   TICK_IMAGE = '20 1F ((((~SSS(SSS^SSSESSSDSSS_SSSBSSS &A(*-+&@(*+$&>(%$)*&=(*-$)*&=(*+$+*&=(*+$+*&=(*$)+*&<(%&()*'+
    '&<(*-&()*&<(*,&()/*&;(*-&(),*&<(*&()-*&<(*&().*&<(*+&()*&<(*+&()*&1(&(*&+(*.&(),*&0(*/++,*&)(*,&()+*&0(*-&().*'+
    '&((*&))*&1(.&*)/*#*+&(),*&1(*+&))+*(*-&().*&3(*+&)),%&))*&5(*&*)*&)),*&5(*,&))+&()+*&7(*&.)/*&7(*,&,).*&9(*&,)*'+
    '&:(*,&*)!\SSS*&;(*&))+*&<(*.$)-*&>(*$-*&?(*.%&:(';
  var
   duration:integer;
   col,vColor:cardinal;
   font:TFontHandle;
   d,y,yy,fontH,size:integer;
   v,ss,tt,alpha:single;
   context:TContext;
   ts:TTextStyle;
   inTransition:boolean;
  begin
   context:=element.styleContext as TContext;

   col:=element.GetStyleColor('border-color',$FF808080); // box outline
   ts:=ResolveTextStyle(element,context,col); // caption is always left-aligned after the box
   ts.align:=taLeft;
   font:=ts.font;
   fontH:=txt.Height(font);
   y:=y2-round((y2-y1+1-fontH)/2);
   size:=round(fontH*1.2);
   inc(x1,round(size*0.3));
   d:=round(size*0.15);
   //
   inTransition:=context.active.IsAnimating(window.frameStartMs);
   if element.classType=TUICheckBox then begin
    vColor:=element.GetStyleColor('tick-color',Color.Add(col,$808080));
    draw.RoundRect(x1,y-size+d,x1+size,y+d,size*0.24,element.globalScale,col,0);
    if tickImage=nil then tickImage:=CreateImageFrom(TICK_IMAGE,1);
    if element.checked or inTransition then begin
     alpha:=1; ss:=1.1;
     if inTransition then begin // transition
      tt:=context.active.Value;
      if context.active.FinalValue=1 then begin
       // appear
       alpha:=splines.easeOut(tt,0,1,0.5,1);
       ss:=Spline(tt, 0.5,3, 1.1,-1);
      end else begin
       // dissolve
       alpha:=tt;
      end;
     end;
     draw.Centered(x1+size*0.65,y-size*0.4,ss*size/tickImage.height,tickImage,Color.Scale(vColor,alpha));
    end;
   end;
   if element.ClassType=TUIRadioButton then begin
    yy:=y-size+d;
    draw.RoundRect(x1,yy,x1+size,yy+size,size*0.5+1,element.globalScale,col,0);
    if element.checked or inTransition then begin
     alpha:=1;
     v:=size*0.24;
     if inTransition then begin // transition
      tt:=context.active.Value;
      if context.active.FinalValue=1 then begin
       // appear
       alpha:=tt;
       v:=size*Spline(tt, 0.4,-0.8, 0.24,0.8);
      end else begin
       // dissolve
       alpha:=tt;
       v:=size*(0.24+tt*0.2);
      end;
     end;
     vColor:=Color.Scale(element.GetStyleColor('tick-color',col),alpha);
     draw.RoundRect(x1+v,yy+v,x1+size-v,yy+size-v,size*0.5+1-v,1,vColor,vColor);
    end;
   end;
   // Caption
   inc(x1,round(size*1.5));
   gfx.clip.Rect(Rect(x1,y1,x2,y2));
   WriteStyled(ts,x1,y,element.caption);
   gfx.clip.Restore;
   if FocusedElement=element then
     draw.Rect(x1,y1,x2,y2,col xor $808080);
  end;

 procedure DrawUIButton(control:TUIButton;x1,y1,x2,y2:integer;context:TContext;drawCaption:boolean);
  var
   localRect:TRect2;
   captionRect:TRect;
   mY:integer;
   c,c2:cardinal;
   hv,av,dv:single;
   wst:String32;
   ts:TTextStyle;
  begin
   with control do begin
      hv:=context.hover.Value;
      av:=context.active.Value;
      dv:=context.disabled.Value;

      // The box (fill / background-image, state-blended) is drawn by the common box path.
      // Procedural look adds a bevel on top of it; a skinned button has the bevel baked in.
      if not context.skinned then begin
       draw.FillGradRect(x1+1,y1+1,x2-1,y2-1,$30FFFFFF,$30000000,true); // bevel gradient
       c:=control.GetBaseStyleColor('border-light',$60000000);
       c2:=control.GetBaseStyleColor('border-dark',$80FFFFFF);
       draw.ShadedRect(x1,y1,x2,y2,1,c,c2); // outer frame
       if av>=1 then { pressed, no inner frame }
        else if dv<1 then begin // enabled
          c:=Color.Mix(control.GetBaseStyleColor('border-light',$A0FFFFFF),
                       control.GetStateStyleColor('hover','border-light',$A0FFFFFF),hv);
          c2:=Color.Mix(control.GetBaseStyleColor('border-dark',$70000000),
                        control.GetStateStyleColor('hover','border-dark',$70000000),hv);
          draw.ShadedRect(x1+1,y1+1,x2-1,y2-1,1,c,c2);
        end else begin // disabled
          c:=control.GetStateStyleColor('disabled','border-light',$A0FFFFFF);
          c2:=control.GetStateStyleColor('disabled','border-dark',$70000000);
          draw.ShadedRect(x1+1,y1+1,x2-1,y2-1,1,c,c2);
        end;
       // focus ring (a skin expresses focus via ':focused { background-image }')
       if (FocusedElement=control) or
          (default and ((FocusedElement=nil) or not (FocusedElement is TUIButton))) then
        draw.Rect(x1-1,y1-1,x2+1,y2+1,$80FFFF80);
      end;
      // The caption and child widgets share the same client-content displacement.
      // Explicit text-offset values remain an additional caption-only adjustment.
      if drawCaption and (caption<>'') and
         not SameText(control.GetStyleValue('caption-display'),'none') then begin
       gfx.clip.Rect(Rect(x1+2,y1+2,x2-2,y2-2));
       ts:=ResolveTextStyle(control,context,clBlack,taCenter,0,$FF300000,$80000000);
       localRect:=GetRect;
       localRect.MoveBy(-scroll.X,-scroll.Y);
       captionRect:=TransformToScreen(localRect).Rounded;
       // fully disabled: engraved look (light shadow under the dimmed caption)
       if (dv>=1) and (ts.shadowColor=0) then ts.shadowColor:=$E0FFFFFF;
       mY:=round((captionRect.Top+captionRect.Bottom-1)*0.5+txt.Height(ts.font)*0.45);
       wSt:=Str32(caption);
       WriteStyled(ts,AlignAnchor(ts,captionRect.Left,captionRect.Right-1),mY,wst);
       gfx.clip.Restore;
      end;
    end;
  end;

 procedure DrawUIFrame(control:TUIFrame;x1,y1,x2,y2:integer);
  var
   c1,c2:cardinal;
   i:integer;
  begin
   c1:=control.GetStyleColor('border-color',clBlack);
   c2:=control.GetStyleColor('border-dark',0); // 0 = flat frame
   for i:=0 to round(control.padding.Left)-1 do begin
    if c2=0 then draw.Rect(x1+i,y1+i,x2-i,y2-i,c1)
     else draw.ShadedRect(x1+i,y1+i,x2-i,y2-i,1,c1,c2);
   end;
  end;

 procedure DrawUIImage(control:TUIImage;x1,y1,x2,y2:integer;context:TContext);
  type
   TImageDrawProc=procedure(img:TUIImage);
  var
   tex:TTexture;
   proc:TImageDrawProc;
  begin
    with control do begin
     if src<>'' then begin
      // SRC = procesure address?
      if src.StartsWith('proc:',true) then begin
       proc:=pointer(Conv.HexToInt(copy(src,6,20)));
       proc(control);
       exit;
      end;
      // SRC = event (must be immediate)
      if src.StartsWith('event:',true) then begin
       Signal(copy(src,7,200),PtrUInt(control));
       exit;
      end;
      // SRC = image reference: 'tex:<name>' or 'file:<name>'
      tex:=context.GetImage(src);
      if tex<>nil then begin
       draw.Scaled(x1,y1,x2-1,y2-1,tex,control.GetStyleColor('tint',clWhite));
      end;
     end;
    end;
  end;

 // Window chrome (header, frame, caption). A skinned window (background-image) has its
 // chrome painted by the artist, so only the box path draws it.
 procedure DrawUIWindow(element:TUIWindow;x1,y1,x2,y2:integer;context:TContext);
  var
   c:cardinal;
   ty:integer;
   col:cardinal;
   ts:TTextStyle;
  begin
   if context.skinned then exit;
   col:=element.GetStyleColor('fill',$FFB0B0C0);
   ts:=ResolveTextStyle(element,context,$FFFFFFD0,taCenter);
   if ts.shadowColor=0 then ts.shadowColor:=$B0000000; // classic title shadow
   with element do begin
    // body: the common box path already drew 'fill' when the style defines it;
    // draw the default body only for a style without 'fill' (avoids double blending)
    if element.GetStyleValue('fill')='' then draw.FillRect(x1,y1,x2,y2,col);
    if boundToWindow then exit; // the app draws the caption row of an OS window frame
    if element.IsActiveWindow then c:=$FF8080E0 // current window
     else c:=$FFB0B0B0;
    c:=Color.Mix(col,c,128);
    if resizeable then begin
      draw.FillRect(x1,y1,x2,y1+header-1,c);
      draw.FillRect(x1,y1+header,x1+wcFrameBorder-1,y2,c);
      draw.FillRect(x2-wcFrameBorder+1,y1+header,x2,y2,c);
      draw.FillRect(x1+wcFrameBorder,y2-wcFrameBorder+1,x2-wcFrameBorder,y2,c);
      draw.ShadedRect(x1+wcFrameBorder-1,y1+header-1,x2-wcFrameBorder+1,y2-wcFrameBorder+1,1,$80000000,$80FFFFFF);
    end else begin
      draw.FillRect(x1,y1,x2,y1+header-1,c);
      draw.ShadedRect(x1+3,y1+header-1,x2-3,y1+header,1,$80000000,$80FFFFFF);
    end;
    draw.ShadedRect(x1,y1,x2,y2,2,$C0FFFFFF,$C0000000);

    gfx.clip.Rect(Rect(x1+2,y1+2,x2-2,y1+header-2));
    ty:=y1+round(header*0.7);
    WriteStyled(ts,AlignAnchor(ts,x1,x2),ty,caption);
    gfx.clip.Restore;
   end;
  end;

 procedure DrawUIScrollbar(element:TUIScrollbar;x1,y1,x2,y2:integer);
  var
   c,d,v,col,trackColor:cardinal;
   size,width,startPos,endPos,minSize:integer;
   scale,trackWidth,sliderWidth,sliderRadius,f:single;
   sStyle:string8;
   context:TContext;
   sliderVisible:boolean;
   r:TRect2;
  begin
   size:=x2-x1; width:=y2-y1;
   if not element.horizontal then Swap(size,width);
   // Calculate parameters
   element.CalcSliderPos(element.GetStyleNumber('min-size',0.75));
   sliderVisible:=(element.sliderEnd>element.sliderStart) and (element.sliderEnd-element.sliderStart<1);

   // Draw
   context:=TContext(element.styleContext);
   sStyle:=element.GetStyleValue('variant','flat');
   col:=element.GetStyleColor('color',$FFA8B0BC); // slider color
   scale:=element.globalScale;

   if SameText(sStyle,'flat') then begin
    // Flat style
    trackWidth:=element.GetStyleNumber('track-width',1);
    sliderWidth:=element.GetStyleNumber('slider-width',0.9);
    sliderRadius:=element.GetStyleNumber('radius',0)*width*sliderWidth;
    // Draw track
    trackColor:=element.GetBaseStyleColor('track-color',Color.Scale(col,0.5));
    trackColor:=Color.Mix(trackColor,element.GetStateStyleColor('hover','track-color',trackColor),context.hover.Value);
    r.Init(x1,y1,x2,y2);
    f:=(1-trackWidth)/2;
    if element.horizontal then begin
     r.y1:=Lerp(y1,y2,f);
     r.y2:=Lerp(y1,y2,1-f);
    end else begin
     r.x1:=Lerp(x1,x2,f);
     r.x2:=Lerp(x1,x2,1-f);
    end;
    draw.FillRect(r.x1,r.y1,r.x2,r.y2,trackColor);

    // Draw slider
    if sliderVisible then begin
     // slider rect
     f:=(1-sliderWidth)/2;
     if element.horizontal then begin
      r.x1:=Lerp(x1,x2,element.sliderStart);
      r.y1:=Lerp(y1,y2,f);
      r.x2:=Lerp(x1,x2,element.sliderEnd);
      r.y2:=Lerp(y1,y2,1-f);
     end else begin
      r.x1:=Lerp(x1,x2,f);
      r.y1:=Lerp(y1,y2,element.sliderStart);
      r.x2:=Lerp(x1,x2,1-f);
      r.y2:=Lerp(y1,y2,element.sliderEnd);
     end;
     // col
     if hooked=element then
      col:=element.GetStyleColor('active-color',Color.Add(col,$404040)) // pressed/dragging
     else if element.sliderUnder then
      col:=element.GetStateStyleColor('hover','color',Color.Add(col,$202020)); // hover col
     if sliderRadius=0 then
      draw.FillRect(r.left,r.top,r.right,r.bottom,col)
     else begin
      r.Round;
      draw.RoundRect(r.left,r.top,r.right,r.bottom,sliderRadius,0,col,col);
     end;
    end;
   end else begin
    // Default (3D) style

    // Draw track
{    c:=colorAdd(col,$202020);
    d:=Color.Sub(col,$202020);
    iwidth:=x2-x1;
    iheight:=y2-y1;
    draw.FillGradrect(x1,y1,x2,y2,d,c,element.horizontal);
    // Draw slider (if needed)

    if element.horizontal then begin
     minWidth:=Max(8,round((y2-y1)*0.75));
     if element.flags.enabled and (iwidth>=minWidth) and (pagesize<max-min) then begin
      v:=colorMix(Color.Add(col,$80101010),$FF6090C0,192);
      c:=colorMix(v,$FFFFFFFF,160);
      d:=colorMix(v,$FF404040,128);
      if sliderUnder and not (hooked=element) then v:=Color.Add(v,$101010);
      i:=round((x2-x1)*(sliderStart/size.x));
      j:=round((x2-x1)*(sliderEnd/size.x));
      if i<0 then i:=0;
      if j>iwidth then j:=iwidth;
      if j>i+6 then begin
       draw.FillGradrect(x1+i,y1,x1+j,y2,colorMix(v,$FFC0E0F0,192),colorMix(v,$FF0000A0,192),true);
       if (hooked=element) then draw.ShadedRect(x1+i,y1,x1+j,y2,1,d,d)
        else draw.ShadedRect(x1+i,y1,x1+j,y2,1,c,d);
       i:=x1+(i+j) div 2;
       draw.ShadedRect(i-2,y1+3,i-1,y2-3,1,d,c);
       draw.ShadedRect(i+1,y1+3,i+2,y2-3,1,d,c);
      end;
     end;
    end else begin
     // Vertical scrollbar
     draw.FillGradrect(x1,y1,x2,y2,d,c,false);
     minWidth:=Max(8,round((x2-x1)*0.75));
     if enabled and (iheight>=minWidth) and (pagesize<max-min) then begin
      v:=colorMix(Color.Add(col,$80101010),$FF6090C0,192);
      c:=colorMix(v,$FFFFFFFF,160);
      d:=colorMix(v,$FF404040,128);
      if sliderUnder and not (hooked=element) then v:=Color.Add(v,$101010);
      i:=round((y2-y1)*(sliderStart/size.y));
      j:=round((y2-y1)*(sliderEnd/size.y));
      if i<0 then i:=0;
      if j>iheight then j:=iheight;
      if j>i+6 then begin
       draw.FillGradrect(x1,y1+i,x2,y1+j,colorMix(v,$FFC0E0F0,192),colorMix(v,$FF0000A0,192),false);
       if (hooked=element) then draw.ShadedRect(x1,y1+i,x2,y1+j,1,d,d)
        else draw.ShadedRect(x1,y1+i,x2,y1+j,1,c,d);
       i:=y1+(i+j) div 2;
       draw.ShadedRect(x1+3,i-2,x2-3,i-1,1,d,c);
       draw.ShadedRect(x1+3,i+1,x2-3,i+2,1,d,c);
      end;
     end;
    end;}
   end;
  end;

 procedure DrawUIEditBox(control:TUIEditBox;x1,y1,x2,y2:integer);
  var
   wst:String32;
   i,j,mY,d,curX,scrollPixels,xStart,prefixWidth,selEndWidth,selX1,selX2,targetX,midX,txtLen:integer;
   c:cardinal;
   font:TFontHandle;
   col:cardinal;
  begin
   font:=StyleFont(control);
   col:=control.GetStyleColor('color',$FF202020);
   with control do begin
    wst:=realtext;
    if password then begin
      SetLength(wst,length(wst));
      for j:=0 to high(wst) do
        wst[j]:=Char32('*');
    end;
    if (scroll.X>0) and (txt.WidthW(font,wst)<(x2-x1)) then Scroll.X:=0;
    gfx.clip.Rect(Rect(x1+2,y1,x2-2,y2));
    my:=round(y1*0.47+y2*0.53+txt.Height(font)*0.4);
    // Default text?
    if realtext.IsEmpty and (not defaultText.IsEmpty) and (FocusedElement<>control) then begin
     txt.WriteW(font,x1+2+offset,mY,Color.Mix(col,$00808080,160),defaultText,taLeft,toDontTranslate);
     gfx.clip.Restore;
     exit;
    end;
    txtLen:=length(wst);
    // Measure full string once and use the same metrics for:
    // caret position, mouse hit-test, and selection bounds.
    if txtLen>0 then
     txt.WriteW(font,0,mY,col,wst,taLeft,toDontTranslate or toDontDraw or toMeasure);

    if needpos>=0 then begin
     targetX:=needPos-3+round(scroll.X);
     cursorpos:=0;
     while cursorpos<txtLen do begin
      midX:=(txt.MeasuredRect(cursorpos).Left+txt.MeasuredRect(cursorpos+1).Left) div 2;
      if targetX<midX then break;
      inc(cursorpos);
     end;
     needpos:=-1;
    end;
    if txtLen=0 then
     i:=0
    else
     i:=txt.MeasuredRect(cursorpos).Left; // caret x in text-local coordinates
    d:=round((y2-y1)*0.15)+8; // left text margin + right padding to keep cursor visible
    if i-scroll.X<0 then scroll.X:=i;
    if i-scroll.X>(x2-x1-d-offset) then scroll.X:=i-(x2-x1-d-offset);
    scrollPixels:=round(scroll.X); // scroll.X is already in screen pixels
    xStart:=x1+round((y2-y1)*0.15)-scrollPixels;
    if not completion.IsEmpty then begin
     j:=xStart+txt.WidthW(font,wst);
     txt.WriteW(font,j+offset,mY,Color.Mix(col,$00808080,160),
       copy(completion,length(wst),length(completion)-length(wst)),taLeft,toDontTranslate);
    end;
    if (selcount>0) and (FocusedElement=control) then begin // part of the text is selected
     j:=xStart+offset;
     if txtLen=0 then begin
      prefixWidth:=0;
      selEndWidth:=0;
     end else begin
      prefixWidth:=txt.MeasuredRect(selstart).Left;
      selEndWidth:=txt.MeasuredRect(selstart+selcount).Left;
     end;
     selX1:=j+prefixWidth;
     selX2:=j+selEndWidth;

     // Draw in three parts, but with x-positions taken from full-string metrics.
     txt.WriteW(font,j,mY,col,copy(wst,0,selstart),taLeft,toDontTranslate);
     d:=selX2-selX1;
     if d>0 then begin
      draw.FillRect(selX1,y1+1,selX2-1,y2-1,$FF4488CC); // selection highlight
      txt.WriteW(font,selX1,mY,$FFFFFFFF,copy(wst,selstart,selcount),taLeft,toDontTranslate);
     end;
     txt.WriteW(font,selX2,mY,col,
       copy(wst,selstart+selcount,length(wst)-selstart-selcount),taLeft,toDontTranslate);
    end else
     txt.WriteW(font,xStart+offset,mY,col,wst,taLeft,toDontTranslate);
    if (FocusedElement=control) and ((CoreTime.Ticks-cursortimer) mod 360<200) then begin // cursor
     curX:=xStart+offset+i-1; // slight visual alignment tweak: 1px to the left
     draw.Line(curX,y1+2,curX,y2-2,Color.Add(col,$404040));
    end;
    gfx.clip.Restore;
   end;
  end;

 procedure DrawUIListBox(control:TUIListBox;x1,y1,x2,y2:integer);
  var
   i,lY:integer;
   c,c1,c2:cardinal;
   scrollPos,lineH:single;
   font:TFontHandle;
  begin
   font:=StyleFont(control);
   with control do begin
     if bgColor<>0 then draw.FillRect(x1,y1,x2,y2,bgColor);
     if scrollerV<>nil then scrollPos:=scrollerV.GetValue*globalScale
      else scrollPos:=0;
      gfx.clip.Rect(Rect(x1,y1,x2+1,y2+1));
      lineH:=lineHeight*globalScale;
      for i:=0 to length(lines)-1 do begin
       lY:=y1+round(i*lineH-scrollPos); /// TODO: check
       if lY+lineH<y1 then continue;
       if lY>y2 then break;
       if i=selectedLine then begin
        draw.FillRect(x1,lY,x2,round(lY+lineH),bgSelColor);
        c:=selTextColor;
       end else
       if i=hoverLine then begin
        draw.FillRect(x1,lY,x2,round(lY+lineH),bgHoverColor);
        c:=hoverTextColor;
       end else
        c:=textColor;
       txt.Write(font,x1+4,lY+round(lineH*0.73),c,lines[i],taLeft,toComplexText);
      end;
     gfx.clip.Restore;
    end;
  end;

 procedure DrawUIComboBox(x1,y1,x2,y2:integer;combo:TUIComboBox;context:TContext);
  var
   st:string8;
   i,cx,cy:integer;
   c:cardinal;
   ts:TTextStyle;
  begin
   if (undermouse=combo) or combo.frame.flags.visible then
    draw.FillGradrect(x1+1,y1+1,x2-1,y2-1,$FFFFFFFF,$FFE0E0DC,true)
   else
    draw.FillGradrect(x1+1,y1+1,x2-1,y2-1,$FFE0E0DC,$FFFFFFFF,true);

   draw.RRect(x1,y1,x2,y2,$80000000,1);
   if FocusedElement=combo then
    draw.RRect(x1,y1,x2,y2,$90A00000);
   with combo do begin
    if (length(items)>0) and (curItem>=0) and (curItem<=high(items)) or
       (curItem<0) and (defaultText<>'') then begin
     gfx.clip.Rect(Rect(x1+1,y1+1,x2-21,y2-1));
     if curItem>=0 then st:=items[curItem]
      else st:=defaultText;
     ts:=ResolveTextStyle(combo,context,$FF000000);
     ts.align:=taLeft;
     WriteStyled(ts,x1+5,round(y2*0.7+y1*0.3),st);
     gfx.clip.Restore;
    end;
    // Arrow
    cx:=x2-round((y2-y1)*0.4);
    cy:=(y1+y2) div 2-1;
    c:=$FF000000;
    for i:=0 to 2 do begin
     draw.Line(cx,cy+2+i,cx-4,cy-2+i,c);
     draw.Line(cx,cy+2+i,cx+4,cy-2+i,c);
    end;
   end;
  end;

 // Common box path: fill / background-image, border, radius, inner block.
 // All box keys are state-blended (hover/pressed/disabled) through the context tweenings.
 // Sets context.skinned when a background-image was drawn.
 procedure DrawCommonStyle(element:TUIElement;context:TContext;outerBorder:boolean=false);
  type
   TImageLayer=record
    tex:TTexture;
    tint:cardinal;
    weight:single; // cross-fade weight (alpha multiplier)
   end;
  var
   fillColor,borderColor:cardinal;
   radius,bWidth,scale:single;
   x1,y1,x2,y2:integer;
   hv,av,dv:single;
   isButton:boolean;
   layers:array[0..3] of TImageLayer;
   layerCount:integer;
   baseImage:String8;
   ofsX,ofsY:single;
   stretch,topLeft:boolean;
  procedure ImportRect(r:TRect;expand:single=0);
   var
    d:integer;
   begin
    d:=round(expand);
    x1:=r.Left-d; x2:=r.right-1+d;
    y1:=r.top-d; y2:=r.bottom-1+d;
   end;
  // Blend box colors/metrics toward a state block (fillDef = default fill for the state)
  procedure BlendState(const state:String8;v:single;fillDef:cardinal);
   begin
    if v<=0 then exit;
    fillColor:=Color.Mix(fillColor,element.GetStateStyleColor(state,'fill',fillDef),v);
    borderColor:=Color.Mix(borderColor,element.GetStateStyleColor(state,'border-color',borderColor),v);
    radius:=Lerp(radius,element.GetStateStyleNumber(state,'radius',radius),v);
    bWidth:=Lerp(bWidth,element.GetStateStyleNumber(state,'border-width',bWidth),v);
   end;
  // Blend image offsets toward a state block (logical units)
  procedure BlendOffset(const state:String8;v:single);
   begin
    if v<=0 then exit;
    ofsX:=Lerp(ofsX,element.GetStateStyleNumber(state,'background-offset-x',ofsX),v);
    ofsY:=Lerp(ofsY,element.GetStateStyleNumber(state,'background-offset-y',ofsY),v);
   end;
  // Add a state image layer: same image -> blend tint only, other image -> cross-fade layer
  procedure AddImageState(const state:String8;v:single);
   var
    src:String8;
    tex:TTexture;
    tint:cardinal;
   begin
    // requested even when the state is inactive: preloads it, no file load on the first hover
    src:=element.GetStateStyleValue(state,'background-image',baseImage);
    tex:=context.GetImage(src);
    if (v<=0) or (tex=nil) then exit;
    tint:=element.GetStateStyleColor(state,'background-tint',layers[layerCount-1].tint);
    if tex=layers[layerCount-1].tex then begin
     layers[layerCount-1].tint:=Color.Mix(layers[layerCount-1].tint,tint,v);
     exit;
    end;
    if layerCount>high(layers) then exit;
    layers[layerCount].tex:=tex;
    layers[layerCount].tint:=tint;
    layers[layerCount].weight:=v;
    inc(layerCount);
   end;
  procedure DrawImageLayers;
   var
    i:integer;
    tint:cardinal;
    w,h,cx,cy,dx,dy:single;
   begin
    dx:=ofsX*scale; dy:=ofsY*scale;
    for i:=0 to layerCount-1 do begin
     tint:=layers[i].tint;
     if layers[i].weight<1 then tint:=Color.Scale(tint,layers[i].weight);
     if stretch then
      draw.Scaled(x1-0.5+dx,y1-0.5+dy,x2+0.5+dx,y2+0.5+dy,layers[i].tex,tint)
     else begin
      // auto: native size in logical units (scaled by globalScale), centered by default or anchored at the top left
      w:=layers[i].tex.width*scale; h:=layers[i].tex.height*scale;
      if topLeft then begin
       cx:=x1+dx+w/2; cy:=y1+dy+h/2;
      end else begin
       cx:=(x1+x2+1)/2+dx; cy:=(y1+y2+1)/2+dy;
      end;
      draw.Image(cx-w/2,cy-h/2,scale,layers[i].tex,tint,0,0);
     end;
    end;
   end;
  procedure DrawBlock;
   var
    i,bw:integer;
   begin
    if radius>1 then begin
     if outerBorder then begin
      if fillColor<>0 then
       draw.RoundRect(x1,y1,x2,y2,radius*scale,0,0,fillColor);
      if (borderColor<>0) and (bWidth>0) then
       draw.RoundRect(x1-bWidth*scale,y1-bWidth*scale,x2+bWidth*scale,y2+bWidth*scale,
         (radius+bWidth)*scale,bWidth*scale,borderColor,0);
     end else
      draw.RoundRect(x1,y1,x2,y2,radius*scale,bWidth*scale,borderColor,fillColor);
    end else begin
     if fillColor<>0 then
      draw.FillRect(x1,y1,x2,y2,fillColor);
     if borderColor<>0 then begin
      bw:=round(bWidth*scale);
      if outerBorder then begin
       for i:=0 to bw-1 do
        draw.Rect(x1-1-i,y1-1-i,x2+1+i,y2+1+i,borderColor)
      end else begin
       for i:=0 to bw-1 do
        draw.Rect(x1+i,y1+i,x2-i,y2-i,borderColor)
      end;
     end;
    end;
   end;
  begin
   context.skinned:=false;
   ImportRect(element.globalRect);
   scale:=element.globalScale;
   hv:=context.hover.Value;
   av:=context.active.Value;
   dv:=context.disabled.Value;
   // Plain/toggle buttons (not checkbox/radio/combo) have a default box and derived state colors
   isButton:=(element.ClassType=TUIButton) or ((element is TUIToggleButton) and not (element is TUICheckbox));

   // Outer block: base values
   if isButton then fillColor:=element.GetBaseStyleColor('fill',defaultBtnColor)
    else fillColor:=element.GetBaseStyleColor('fill');
   borderColor:=element.GetBaseStyleColor('border-color');
   radius:=element.GetBaseStyleNumber('radius');
   bWidth:=element.GetBaseStyleNumber('border-width');

   // Background image: base layer + state layers (cross-fade)
   layerCount:=0;
   baseImage:=element.GetStyleValue('background-image');
   if baseImage<>'' then begin
    layers[0].tex:=context.GetImage(baseImage);
    if layers[0].tex<>nil then begin
     layers[0].tint:=element.GetBaseStyleColor('background-tint',clNeutral);
     layers[0].weight:=1;
     layerCount:=1;
     AddImageState('hover',hv);
     AddImageState('pressed',av);
     AddImageState('disabled',dv);
     stretch:=SameText(element.GetStyleValue('background-size','auto'),'stretch');
     topLeft:=SameText(element.GetStyleValue('background-position','center'),'top-left');
     ofsX:=element.GetBaseStyleNumber('background-offset-x');
     ofsY:=element.GetBaseStyleNumber('background-offset-y');
     BlendOffset('hover',hv);
     BlendOffset('pressed',av);
     BlendOffset('disabled',dv);
    end;
   end;

   if (fillColor=0) and (borderColor=0) and (radius=0) and (bWidth=0) and (layerCount=0) then exit; // nothing to draw

   // State blend: hover -> pressed -> disabled (layered)
   if isButton then begin
    BlendState('hover',hv,Color.Add(fillColor,$101010));
    BlendState('pressed',av,Color.Sub(fillColor,$282020));
    BlendState('disabled',dv,Color.Mix(fillColor,$FFA0A0A0,128));
   end else begin
    BlendState('hover',hv,fillColor);
    BlendState('pressed',av,fillColor);
    BlendState('disabled',dv,fillColor);
   end;

   // This is important for drawing large semi-transparent areas on a transparent background (render to texture)
   // to avoid duplicate alpha blending (resulting in alpha=sqr(alpha))
   if Color.HasAlpha(fillColor) or (layerCount>0) then SetProperBlendMode(element);
   DrawBlock;
   if layerCount>0 then begin
    DrawImageLayers;
    context.skinned:=true;
   end;
   RestoreBlendMode;

   // Inner (client) block
   outerBorder:=false;
   fillColor:=element.GetBaseStyleColor('inner-fill');
   borderColor:=element.GetBaseStyleColor('inner-border-color');
   radius:=element.GetBaseStyleNumber('inner-radius',radius);
   bWidth:=element.GetBaseStyleNumber('inner-border-width',bWidth);
   if (fillColor<>0) or (borderColor<>0) then begin
    ImportRect(element.GetClientPosOnScreen,bWidth*scale);
    DrawBlock;
   end;
  end;

 // Default UI drawer
 procedure DrawDefaultUI(element:TUIElement;drawButtonCaption:boolean);
  var
   x1,y1,x2,y2:integer;
   context:TContext;
  begin
   context:=PrepareContext(element);
   context.Update(element);
   if (element.ClassType=TUIButton) or
     ((element is TUIToggleButton) and not (element is TUICheckBox)) then begin
    // Buttons use scroll to move all children as a group. Assign absolutely.
    element.scroll.X:=0;
    element.scroll.Y:=-context.active.Value*element.GetStyleNumber('content-press-offset',1);
   end;
   DrawCommonStyle(element,context,element is TUIListBox);

   with element.globalrect do begin
    x1:=Left; x2:=right-1;
    y1:=top; y2:=bottom-1;
   end;

   // Plain container - fill plus frame
   if element.ClassType=TUIElement then
    DrawUIElement(element,x1,y1,x2,y2,context)
   else
   // Label
   if element is TUILabel then
    DrawUILabel(element as TUILabel,x1,y1,x2,y2,context)
   else
   // Button
   if element.ClassType=TUIButton then
    DrawUIButton(element as TUIButton,x1,y1,x2,y2,context,drawButtonCaption)
   else
   if element is TUICheckbox then
    DrawUICheckbox(element as TUICheckbox,x1,y1,x2,y2)
   else
   // Toggle button (tabs, segmented controls): drawn as a button, toggled=pressed.
   // Checkbox/radio are caught above; combo descends from TUIButton, not from toggle.
   if element is TUIToggleButton then
    DrawUIButton(element as TUIButton,x1,y1,x2,y2,context,drawButtonCaption)
   else
   // Frame
   if element.ClassType=TUIFrame then
    DrawUIFrame(element as TUIFrame,x1,y1,x2,y2)
   else
   // Arbitrary image
   if element.ClassType=TUIImage then
    DrawUIImage(element as TUIImage,x1,y1,x2,y2,context)
   else
   // popup hint
   if element is TUIHint then
    DrawUIHint(element as TUIHint,x1,y1,x2,y2)
   else
   // Window
   if element.ClassType=TUIWindow then
    DrawUIWindow(element as TUIWindow,x1,y1,x2,y2,context)
   else
   // Scrollbar
   if element.ClassType=TUIScrollBar then
    DrawUIScrollbar(element as TUIScrollBar,x1,y1,x2,y2)
   else
   // EditBox
   if element.ClassType=TUIEditBox then
    DrawUIEditBox(element as TUIEditBox,x1,y1,x2,y2)
   else
   // ListBox
   if element is TUIListBox then
    DrawUIListBox(element as TUIListBox,x1,y1,x2,y2)
   else
   // Combo box
   if element is TUIComboBox then
    DrawUIComboBox(x1,y1,x2,y2,element as TUIComboBox,context);
   {else
    DrawUIElement(element,x1,y1,x2,y2);}
  end;

 procedure DefaultDrawer(element:TUIElement);
  begin
   DrawDefaultUI(element);
  end;

 function ResolveUITextStyle(element:TUIElement;defColor:cardinal;
   defAlign:TTextAlignment;defOptions:cardinal;
   defHoverColor:cardinal;defDisabledColor:cardinal;defPressOfsY:single):TUITextStyle;
  var context:TContext; temporary:boolean;
  begin
   // Reading parent text must not destroy another drawer's private context.
   temporary:=(element.styleContext<>nil) and not (element.styleContext is TContext);
   if temporary then context:=TContext.Create(element)
    else context:=PrepareContext(element);
   try
    context.Update(element);
    result:=ResolveTextStyle(element,context,defColor,defAlign,defOptions,
      defHoverColor,defDisabledColor,defPressOfsY);
   finally
    if temporary then context.Free;
   end;
  end;

 procedure WriteUIText(const style:TUITextStyle;x,y:single;const text:String8;targetWidth:integer);
  begin
   WriteStyled(style,x,y,text,targetWidth);
  end;

{ TContext }

destructor TContext.Destroy;
 var
  i:integer;
 begin
  for i:=0 to high(imgTex) do FreeImage(imgTex[i]);
  hover.Free;
  active.Free;
  disabled.Free;
  inherited;
 end;

constructor TContext.Create(element:TUIElement);
 var
  v:integer;
 begin
  if element.IsEnabled then v:=0 else v:=1;
  disabled.Assign(v);
  hover.Assign(HoverState(element));
  v:=0;
  if element is TUIButton then
   if TUIButton(element).pressed then v:=1;
  if element is TUIToggleButton then
   if TUIToggleButton(element).toggled then v:=1;
  active.Assign(v);
 end;

procedure TContext.Update(element:TUIElement);
 var
  v,duration:integer;
 begin
  // Mouse hover state
  v:=HoverState(element);
  if hover.FinalValue<>v then begin
   if v=1 then duration:=120 else duration:=80; // default
   duration:=element.GetStyleInt('hover-time',duration);
   if v=1 then duration:=element.GetStyleInt('hover-time-in',duration)
    else duration:=element.GetStyleInt('hover-time-out',duration);
   hover.Animate(v,duration);
  end;
  // sync hover state to element.style for CSS :hover blocks
  element.SetState('hover',v=1);

  // Click/toggle state
  v:=0;
  if element is TUIButton then
   if TUIButton(element).pressed then v:=1;
  if element is TUIToggleButton then
   if TUIToggleButton(element).toggled then v:=1;
  if active.FinalValue<>v then begin
   if v=1 then duration:=120 else duration:=80;
   duration:=element.GetStyleInt('press-time',duration);
   if v=0 then duration:=element.GetStyleInt('release-time',duration);
   active.Animate(v,duration);
  end;
  // sync pressed/toggled state
  element.SetState('pressed',v=1);

  // Disabled state
  if element.IsEnabled then v:=0 else v:=1;
  if disabled.FinalValue<>v then begin
   duration:=element.GetStyleInt('disable-time',0);
   if v=0 then duration:=element.GetStyleInt('enable-time',duration);
   disabled.Animate(v,duration);
  end;
  // sync disabled state
  element.SetState('disabled',v=1);
  // Keyboard focus (no tweening: ':focused' blocks switch instantly)
  element.SetState('focused',FocusedElement=element);
 end;

function TContext.GetImage(const src:String8):TTexture;
 var
  i,n:integer;
 begin
  if not src.StartsWith('file:',true) then exit(ResolveStyleImage(src)); // weak reference, no memo
  for i:=0 to high(imgSrc) do
   if imgSrc[i]=src then exit(imgTex[i]);
  result:=ResolveStyleImage(src);
  if result=nil then exit; // not available yet: retry next frame
  n:=length(imgSrc);
  SetLength(imgSrc,n+1);
  SetLength(imgTex,n+1);
  imgSrc[n]:=src;
  imgTex[n]:=result;
 end;

function TContext.HoverState(element:TUIElement):byte;
 var
  hoverEl:TUIElement;
 begin
  hoverEl:=element;
  if SameText(element.GetStyleValue('hover-target'),'parent') and (element.parent<>nil) then
   hoverEl:=element.parent;
  if (underMouse=hoverEl) or hoverEl.HasChild(underMouse) then result:=1
   else result:=0;
 end;

initialization
 RegisterUIStyle(0,DefaultDrawer,'Default');
 TUIEditBox.SetDefault('styleInfo','border-width:1; radius:3; border-color:8000; fill:8FFF');
end.