demo: scroll: overflow-x+y

demo/ScrollBox/MainUnit.lfm

@@ -1,11 +1,11 @@
 object MainForm: TMainForm
   Caption = 'MainForm'
   FormLeft = 450
-  FormTop = 300
+  FormTop = 100
   FormWidth = 350
-  FormHeight = 255
+  FormHeight = 555
   Stylesheet.Strings = (
-    'div {'
+    '#ScrollDiv1 {'
     '  padding: 5px; '
     '  border: 2px solid black; '
     '  margin: 8px;'
@@ -14,15 +14,73 @@ object MainForm: TMainForm
   OnCreate = MainFormCreate
   Visible = true
   object Body1: TBody
-    Style = 'border: 2px solid blue;'#10
-    object Div1: TDiv
+    style = 'font-size: 15px;'
+    object ScrollDiv1: TDiv
       Style = 'background-color: blue;'#10'border-color: black;'#10'height:50px;'
       object Label1: TLabel
         Style = 'color: red;'
         Caption = 'Label1'
       end
       object Div2: TDiv
-        Style = 'width: 50px; height: 50px; '
+        Style = 'width: 50px; height: 50px; margin: 8px; border: 2px solid black;'
+      end
+    end
+    object OptionsDiv: TDiv
+      Style = 'min-width: 50px; min-height: 50px; margin: 6px; border: 1px solid black; border-radius: 5px; '
+      object OverflowXDiv: TDiv
+        Style = 'min-width: 50px; min-height: 50px; margin: 6px; border: 1px solid black; padding: 6px;'
+        object OverflowXLabel: TLabel
+          Caption = 'overflow-x'
+          Style = 'margin: 6px; font-weight: bold; font-size: 1.2em; '
+        end
+        object OverflowXVisible: TDemoRadioButton
+          Caption = 'visible'
+          OnClick = OnOverflowXClicked
+        end
+        object OverflowXHidden: TDemoRadioButton
+          Caption = 'hidden'
+          OnClick = OnOverflowXClicked
+        end
+        object OverflowXClip: TDemoRadioButton
+          Caption = 'clip'
+          OnClick = OnOverflowXClicked
+        end
+        object OverflowXScroll: TDemoRadioButton
+          Caption = 'scroll'
+          OnClick = OnOverflowXClicked
+        end
+        object OverflowXAuto: TDemoRadioButton
+          Caption = 'auto'
+          OnClick = OnOverflowXClicked
+        end
+      end
+      object OverflowYDiv: TDiv
+        Style = 'min-width: 50px; min-height: 50px; margin: 6px; border: 1px solid black; padding: 6px;'
+        object OverflowYLabel: TLabel
+          Caption = 'overflow-y'
+          Style = 'margin: 6px; font-weight: bold; font-size: 1.2em; '
+          OnClick = OnOverflowYClicked
+        end
+        object OverflowYVisible: TDemoRadioButton
+          Caption = 'visible'
+          OnClick = OnOverflowYClicked
+        end
+        object OverflowYHidden: TDemoRadioButton
+          Caption = 'hidden'
+          OnClick = OnOverflowYClicked
+        end
+        object OverflowYClip: TDemoRadioButton
+          Caption = 'clip'
+          OnClick = OnOverflowYClicked
+        end
+        object OverflowYScroll: TDemoRadioButton
+          Caption = 'scroll'
+          OnClick = OnOverflowYClicked
+        end
+        object OverflowYAuto: TDemoRadioButton
+          Caption = 'auto'
+          OnClick = OnOverflowYClicked
+        end
       end
     end
   end

demo/ScrollBox/MainUnit.pas

@@ -6,7 +6,7 @@ interface
 
 uses
   Classes, SysUtils, Fresnel.Forms, Fresnel.Controls, Fresnel.Events,
-  FCL.Events;
+  FCL.Events, Fresnel.DemoRadioButton;
 
 type
 
@@ -14,10 +14,27 @@ type
 
   TMainForm = class(TFresnelForm)
     Body1: TBody;
-    Div1: TDiv;
+    ScrollDiv1: TDiv;
     Div2: TDiv;
     Label1: TLabel;
+    OptionsDiv: TDiv;
+    OverflowXDiv: TDiv;
+    OverflowXLabel: TLabel;
+    OverflowXVisible: TDemoRadioButton;
+    OverflowXHidden: TDemoRadioButton;
+    OverflowXClip: TDemoRadioButton;
+    OverflowXScroll: TDemoRadioButton;
+    OverflowXAuto: TDemoRadioButton;
+    OverflowYDiv: TDiv;
+    OverflowYLabel: TLabel;
+    OverflowYVisible: TDemoRadioButton;
+    OverflowYHidden: TDemoRadioButton;
+    OverflowYClip: TDemoRadioButton;
+    OverflowYScroll: TDemoRadioButton;
+    OverflowYAuto: TDemoRadioButton;
     procedure MainFormCreate(Sender: TObject);
+    procedure OnOverflowXClicked(Event : TAbstractEvent);
+    procedure OnOverflowYClicked(Event : TAbstractEvent);
   private
   public
   end;
@@ -33,9 +50,29 @@ implementation
 
 procedure TMainForm.MainFormCreate(Sender: TObject);
 begin
-  Div1.Style:='overflow: auto; width: 200px; height: 50px;';
+  ScrollDiv1.Style:='overflow: auto; width: 200px; height: 50px;';
+  OverflowXAuto.Checked:=true;
+  OverflowYAuto.Checked:=true;
   Label1.Caption:='Fresnel is a visual component library based on CSS and custom drawn components.';
 end;
 
+procedure TMainForm.OnOverflowXClicked(Event: TAbstractEvent);
+var
+  El: TDemoRadioButton;
+begin
+  El:=Event.Sender as TDemoRadioButton;
+  writeln('TMainForm.OnOverflowXClicked ',El.Caption);
+  ScrollDiv1.SetStyleAttr('overflow-x',El.Caption);
+end;
+
+procedure TMainForm.OnOverflowYClicked(Event: TAbstractEvent);
+var
+  El: TDemoRadioButton;
+begin
+  El:=Event.Sender as TDemoRadioButton;
+  writeln('TMainForm.OnOverflowYClicked ',El.Caption);
+  ScrollDiv1.SetStyleAttr('overflow-y',El.Caption);
+end;
+
 end.
 

demo/ScrollBox/ScrollBoxLCLDemo1.lpi

@@ -10,7 +10,6 @@
       </Flags>
       <SessionStorage Value="InProjectDir"/>
       <Title Value="ScrollBoxLCLDemo1"/>
-      <UseAppBundle Value="False"/>
       <ResourceType Value="res"/>
       <Icon Value="0"/>
     </General>
@@ -25,6 +24,9 @@
       <FormatVersion Value="2"/>
     </RunParams>
     <RequiredPackages>
+      <Item>
+        <PackageName Value="FresnelDemoComps"/>
+      </Item>
       <Item>
         <PackageName Value="FresnelLCL"/>
         <DefaultFilename Value="../../src/lcl/fresnellcl.lpk" Prefer="True"/>

demo/democomps/fresnel.demoradiobutton.pas

@@ -20,7 +20,7 @@ type
     function GetCaption: TFresnelCaption;
     function GetChecked: boolean;
   protected
-    procedure OnBoxClickEvent(Event: TAbstractEvent); virtual;
+    procedure OnClickEvent(Event: TAbstractEvent); virtual;
     procedure SetCaption(const AValue: TFresnelCaption); virtual;
     procedure SetChecked(AValue: boolean); virtual;
     procedure UncheckOthers; virtual;
@@ -47,6 +47,7 @@ type
     CaptionLabel: TLabel;
     constructor Create(AOwner: TComponent); override;
     class function GetCSSTypeStyle: TCSSString; override;
+  published
     property Caption: TFresnelCaption read GetCaption write SetCaption;
     property Checked: boolean read GetChecked write SetChecked;
     property OnChange: TNotifyEvent read FOnChange write FOnChange;
@@ -66,7 +67,7 @@ begin
   Result:=FChecked;
 end;
 
-procedure TDemoRadioButton.OnBoxClickEvent(Event: TAbstractEvent);
+procedure TDemoRadioButton.OnClickEvent(Event: TAbstractEvent);
 begin
   if Event=nil then ;
   Checked:=true;
@@ -114,7 +115,6 @@ begin
   with Box do begin
     Name:='Box';
     CSSClasses.Add('RadioButtonBox');
-    AddEventListener(evtClick,@OnBoxClickEvent);
     Style:=cUncheckedStyle;
     Parent:=Self;
   end;
@@ -125,6 +125,8 @@ begin
     CSSClasses.Add('RadioButtonLabel');
     Parent:=Self;
   end;
+
+  AddEventListener(evtClick,@OnClickEvent);
 end;
 
 class function TDemoRadioButton.GetCSSTypeStyle: TCSSString;

design/DemoCompsReg.pas

@@ -5,7 +5,8 @@ unit DemoCompsReg;
 interface
 
 uses
-  Classes, SysUtils, Fresnel.DemoCheckBox, Fresnel.DemoSlider, Fresnel.DemoCombobox;
+  Classes, SysUtils, Fresnel.DemoCheckBox, Fresnel.DemoSlider, Fresnel.DemoCombobox,
+  Fresnel.DemoRadioButton;
 
 procedure Register;
 
@@ -15,7 +16,7 @@ implementation
 
 procedure Register;
 begin
-  RegisterComponents('Fresnel',[TDemoCheckBox,TDemoSlider,TDemoCombobox]);
+  RegisterComponents('Fresnel',[TDemoCheckBox,TDemoSlider,TDemoCombobox,TDemoRadioButton]);
 end;
 
 end.

src/base/fresnel.dom.pas

@@ -1067,7 +1067,7 @@ type
   TFresnelLayoutFlag = (
     flfClipHorizontal,
     flfClipVertical,
-    flfScrollbarHorizontal,
+    flfScrollbarHorizontal, // can draw horizontal scrollbar (might be hidden due to auto hide)
     flfScrollbarVertical
     );
   TFresnelLayoutFlags = set of TFresnelLayoutFlag;
@@ -9651,6 +9651,7 @@ destructor TFresnelElement.Destroy;
 var
   i: Integer;
 begin
+  Parent:=nil;
   Clear;
   for i:=PseudoNodeCount-1 downto 0 do
     PseudoNodes[i].Parent:=nil;

src/base/fresnel.layouter.pas

@@ -328,9 +328,11 @@ begin
 
     if Node.ScrollbarWidth<>CSSRegistry.kwNone then
     begin
-      if (Node.ScrollWidth>aClientWidth) and (El.ComputedOverflowX<>CSSRegistry.kwHidden) then
+      if (Node.ScrollWidth>aClientWidth)
+          and (El.ComputedOverflowX in [CSSRegistry.kwScroll,CSSRegistry.kwAuto]) then
         Include(Node.Flags,flfScrollbarHorizontal);
-      if (Node.ScrollHeight>aClientHeight) and (El.ComputedOverflowY<>CSSRegistry.kwHidden) then
+      if (Node.ScrollHeight>aClientHeight)
+          and (El.ComputedOverflowY in [CSSRegistry.kwScroll,CSSRegistry.kwAuto]) then
         Include(Node.Flags,flfScrollbarVertical);
     end;
 

src/base/fresnel.renderer.pas

@@ -748,7 +748,7 @@ begin
   aPaddingBox:=El.GetUsedPaddingBox;
   //writeln('TFresnelRenderer.DrawScrollBars ',El.Name,' PaddingBox=',aPaddingBox.ToString);
 
-  aScrollbar:=El.ScrollBarVertical as TRendererScrollBar;
+  aScrollbar:=TRendererScrollBar(El.ScrollBarVertical);
   if HasVertBar then
   begin
     r:=aPaddingBox;
@@ -778,7 +778,7 @@ begin
   end else if aScrollbar<>nil then
     aScrollbar.Free;
 
-  aScrollbar:=El.ScrollBarHorizontal as TRendererScrollBar;
+  aScrollbar:=TRendererScrollBar(El.ScrollBarHorizontal);
   if HasHorzBar then
   begin
     r:=aPaddingBox;
@@ -851,7 +851,7 @@ begin
 
   FLLog(etDebug,'TFresnelRenderer.DrawElement %s %s',[El.GetPath,aBorderBox.ToString]);
 
-  //writeln('TFresnelRenderer.DrawElement ',El.Name,' BorderBox=',El.UsedBorderBox.ToString,' ContentBox=',El.UsedContentBox.ToString);
+  //writeln('TFresnelRenderer.DrawElement ',El.Name,' BorderBox=',El.UsedBorderBox.ToString,' ContentBox=',El.UsedContentBox.ToString,' Origin=',Origin.ToString);
 
   // background and border
   BorderParams:=CreateBorderAndBackground;