lazarus.fresnel/demo/VerticalAlign/MainUnit.pas

unit MainUnit;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, math, FpImage, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls, Fresnel.Events,
  FCL.Events, Fresnel.Classes, Fresnel.DemoRadioButton, Fresnel.DemoSlider;

type

  { TMyDrawing }

  TMyDrawing = class(TImage)
  protected
    procedure DoRender(aRenderer: IFresnelRenderer); override;
  end;

  { TMainForm }

  TMainForm = class(TFresnelForm)
    procedure MainFormCreate(Sender: TObject);
  private
    procedure OnVerticalAlignClick(Event: TAbstractEvent);
    procedure PxSliderChange(Sender: TObject);
    procedure SetVerticalAlign(s: string);
  public
    VerticalAlignRadiogroup: TDiv;
    VerticalAlignBaselineRB: TDemoRadioButton;
    VerticalAlignSubRB: TDemoRadioButton;
    VerticalAlignSuperRB: TDemoRadioButton;
    VerticalAlignTextTopRB: TDemoRadioButton;
    VerticalAlignTextBottomRB: TDemoRadioButton;
    VerticalAlignMiddleRB: TDemoRadioButton;
    VerticalAlignPxRB: TDemoRadioButton;
    PxSlider: TDemoSlider;

    TextNormalDiv, TextBigDiv, TextSmallDiv, TextImageDiv: TDiv;
    NormalCaption, NormalLabel, BigCaption, BigLabel, SmallCaption, SmallLabel, ImageCaption: TLabel;
    MyDrawing: TMyDrawing;
  end;

var
  MainForm: TMainForm;

implementation

{$R *.lfm}

{ TMyDrawing }

procedure TMyDrawing.DoRender(aRenderer: IFresnelRenderer);
var
  R: TFresnelRect;
  Points: TFresnelPointArray;
  w, h: TFresnelLength;
begin
  R:=UsedContentBox;

  h:=Min(R.Width,R.Height);
  w:=h*0.66;

  Points:=[];
  SetLength(Points,3);
  Points[0].X:=R.Left+(r.Width-w)/2;
  Points[0].Y:=R.Top+(r.Height-h)/2;
  Points[1].X:=Points[0].X+w;
  Points[1].Y:=(R.Top+R.Bottom)/2;
  Points[2].X:=Points[0].X;
  Points[2].Y:=R.Bottom-(r.Height-h)/2;

  aRenderer.Polygon(colWhite,@Points[0],3);
end;

{ TMainForm }

procedure TMainForm.MainFormCreate(Sender: TObject);

  function AddDiv(aName: string; aParent: TFresnelElement): TDiv;
  begin
    Result:=TDiv.Create(Self);
    Result.Name:=aName;
    Result.Parent:=aParent;
  end;

  function AddLabel(aName, aCaption: string; aParent: TFresnelElement): TLabel;
  begin
    Result:=TLabel.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.Parent:=aParent;
  end;

  function AddRadioButton(aName, aCaption: string; aParent: TFresnelElement;
    const OnClick: TFresnelEventHandler = nil): TDemoRadioButton;
  begin
    Result:=TDemoRadioButton.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.Parent:=aParent;
    Result.AddEventListener(evtClick,OnClick);
  end;

  function AddSlider(aName, aCaption: string; aParent: TFresnelElement;
    MinPos, MaxPos: TFresnelLength; ValueFormat: string): TDemoSlider;
  begin
    Result:=TDemoSlider.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.MinPosition:=MinPos;
    Result.MaxPosition:=MaxPos;
    Result.ValueFormat:=ValueFormat;
    Result.Parent:=aParent;
  end;

begin
  Style:='font-size: 15px;';
  Stylesheet.Text:=':root { font-size: 15px; }'+LineEnding
    +'#TextDiv { font-size: 30px; }'+LineEnding;

  VerticalAlignRadiogroup:=AddDiv('VerticalAlignRadiogroup',Self);
  VerticalAlignRadiogroup.Style:='padding: 1em;';

  VerticalAlignBaselineRB:=AddRadioButton('VerticalAlignBaselineRB','baseline',
    VerticalAlignRadiogroup,@OnVerticalAlignClick);
  VerticalAlignBaselineRB.Checked:=true;
  VerticalAlignSubRB:=AddRadioButton('VerticalAlignSubRB','sub',
    VerticalAlignRadiogroup,@OnVerticalAlignClick);
  VerticalAlignSuperRB:=AddRadioButton('VerticalAlignSuperRB','super',
    VerticalAlignRadiogroup,@OnVerticalAlignClick);
  VerticalAlignTextTopRB:=AddRadioButton('VerticalAlignTextTopRB','text-top',
    VerticalAlignRadiogroup,@OnVerticalAlignClick);
  VerticalAlignTextBottomRB:=AddRadioButton('VerticalAlignTextBottomRB','text-bottom',
    VerticalAlignRadiogroup,@OnVerticalAlignClick);
  VerticalAlignMiddleRB:=AddRadioButton('VerticalAlignMiddleRB','middle',
    VerticalAlignRadiogroup,@OnVerticalAlignClick);
  VerticalAlignPxRB:=AddRadioButton('VerticalAlignPxRB','px',
    VerticalAlignRadiogroup,@OnVerticalAlignClick);
  PxSlider:=AddSlider('PxSlider','',VerticalAlignRadiogroup,-10,10,'%fpx');
  PxSlider.Style:='margin-left: 3em; width: 10em;';
  PxSlider.OnChange:=@PxSliderChange;

  // normal size label
  TextNormalDiv:=AddDiv('TextNormalDiv',Self);
  TextNormalDiv.Style:='padding: 1em;';
  NormalCaption:=AddLabel('NormalCaption','Label:',TextNormalDiv);
  NormalCaption.Style:='margin-right: .5em; background: #ccc;';
  NormalLabel:=AddLabel('NormalLabel','Fresnel',TextNormalDiv);
  NormalLabel.Style:='background: #ccc;';

  // big size label
  TextBigDiv:=AddDiv('TextBigDiv',Self);
  TextBigDiv.Style:='padding: 1em;';
  BigCaption:=AddLabel('BigCaption','Label:',TextBigDiv);
  BigCaption.Style:='margin-right: .5em; background: #ccc;';
  BigLabel:=AddLabel('BigLabel','Fresnel',TextBigDiv);
  BigLabel.Style:='font-size: 200%; background: #ccc;';

  // small size label
  TextSmallDiv:=AddDiv('TextSmallDiv',Self);
  TextSmallDiv.Style:='padding: 1em;';
  SmallCaption:=AddLabel('SmallCaption','Label:',TextSmallDiv);
  SmallCaption.Style:='margin-right: .5em; background: #ccc;';
  SmallLabel:=AddLabel('SmallLabel','Fresnel',TextSmallDiv);
  SmallLabel.Style:='font-size: 50%; background: #ccc;';

  // label+image
  TextImageDiv:=AddDiv('TextImageDiv',Self);
  TextImageDiv.Style:='padding: 1em;';
  ImageCaption:=AddLabel('ImageCaption','Image:',TextImageDiv);
  ImageCaption.Style:='margin-right: .5em; background: #ccc;';
  MyDrawing:=TMyDrawing.Create(Self);
  MyDrawing.Name:='MyDrawing';
  MyDrawing.Style:='display: inline flow-root; width: .8em; height: .8em; background: blue;';
  MyDrawing.Parent:=TextImageDiv;
end;

procedure TMainForm.OnVerticalAlignClick(Event: TAbstractEvent);
var
  s: String;
begin
  if Event.Sender=VerticalAlignSubRB then
    s:='sub'
  else if Event.Sender=VerticalAlignSuperRB then
    s:='super'
  else if Event.Sender=VerticalAlignTextTopRB then
    s:='text-top'
  else if Event.Sender=VerticalAlignTextBottomRB then
    s:='text-bottom'
  else if Event.Sender=VerticalAlignMiddleRB then
    s:='middle'
  else if Event.Sender=VerticalAlignPxRB then
    s:=FloatToCSSPx(PxSlider.SliderPosition)
  else
    s:='baseline';
  SetVerticalAlign(s);
end;

procedure TMainForm.PxSliderChange(Sender: TObject);
begin
  if VerticalAlignPxRB.Checked then
    SetVerticalAlign(FloatToCSSPx(PxSlider.SliderPosition));
end;

procedure TMainForm.SetVerticalAlign(s: string);
begin
  NormalLabel.SetStyleAttr('vertical-align',s);
  BigLabel.SetStyleAttr('vertical-align',s);
  SmallLabel.SetStyleAttr('vertical-align',s);
  MyDrawing.SetStyleAttr('vertical-align',s);
end;

end.