demo: started cssview

demo/lcl/CSSViewer/.gitignore

@@ -0,0 +1 @@
+DemoLCLCSSView

demo/lcl/CSSViewer/DemoLCLCSSView.lpi

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="DemoLCLCSSView"/>
+      <Scaled Value="True"/>
+      <ResourceType Value="res"/>
+      <UseXPManifest Value="True"/>
+      <XPManifest>
+        <DpiAware Value="True"/>
+      </XPManifest>
+      <Icon Value="0"/>
+    </General>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <RequiredPackages>
+      <Item>
+        <PackageName Value="FresnelDsgn"/>
+      </Item>
+      <Item>
+        <PackageName Value="FresnelLCL"/>
+      </Item>
+      <Item>
+        <PackageName Value="LCL"/>
+      </Item>
+    </RequiredPackages>
+    <Units>
+      <Unit>
+        <Filename Value="DemoLCLCSSView.lpr"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="mainunit.pas"/>
+        <IsPartOfProject Value="True"/>
+        <ComponentName Value="Form1"/>
+        <HasResources Value="True"/>
+        <ResourceBaseClass Value="Form"/>
+        <UnitName Value="MainUnit"/>
+      </Unit>
+      <Unit>
+        <Filename Value="unit1.pas"/>
+        <IsPartOfProject Value="True"/>
+        <ComponentName Value="FresnelForm1"/>
+        <ResourceBaseClass Value="Other"/>
+        <ResourceBaseClassname Value="TFresnelForm"/>
+        <UnitName Value="Unit1"/>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target>
+      <Filename Value="DemoLCLCSSView"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="lib/$(TargetCPU)-$(TargetOS)"/>
+    </SearchPaths>
+    <Linking>
+      <Options>
+        <Win32>
+          <GraphicApplication Value="True"/>
+        </Win32>
+      </Options>
+    </Linking>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

demo/lcl/CSSViewer/DemoLCLCSSView.lpr

@@ -0,0 +1,27 @@
+program DemoLCLCSSView;
+
+{$mode objfpc}{$H+}
+
+uses
+  {$IFDEF UNIX}
+  cthreads,
+  {$ENDIF}
+  {$IFDEF HASAMIGA}
+  athreads,
+  {$ENDIF}
+  Interfaces, // this includes the LCL widgetset
+  Forms, MainUnit, Unit1, Fresnel
+  { you can add units after this };
+
+{$R *.res}
+
+begin
+  RequireDerivedFormResource:=True;
+  Application.Scaled:=True;
+  Application.{%H-}MainFormOnTaskbar:=True;
+  Application.Initialize;
+  Application.CreateForm(TForm1, Form1);
+  Application.CreateForm(TFresnelForm1, FresnelForm1);
+  Application.Run;
+end.
+

demo/lcl/CSSViewer/fresnel.cssview.lfm

@@ -0,0 +1,8 @@
+object FresnelCSSView: TFresnelCSSView
+  Style = 'position:absolute; box-sizing:border-box; left:248px; top:10px; width:320px; height:240px'
+  Caption = 'CSS'
+  FormLeft = 418
+  FormTop = 216
+  FormWidth = 516
+  FormHeight = 521
+end

demo/lcl/CSSViewer/fresnel.cssview.pas

@@ -0,0 +1,134 @@
+unit Fresnel.CSSView;
+
+{$mode ObjFPC}{$H+}
+
+interface
+
+uses
+  Classes, SysUtils, Fresnel.Classes, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls;
+
+type
+
+  { TFresnelCSSView }
+
+  TFresnelCSSView = class(TFresnelForm)
+  private
+    FTargetViewPort: TFresnelViewport;
+    procedure SetTargetViewPort(const AValue: TFresnelViewport);
+  protected
+    procedure Notification(AComponent: TComponent; Operation: TOperation); override;
+    procedure UpdateTree; virtual;
+  public
+    type
+
+      { TElementNode }
+
+      TElementNode = class(TComponent)
+      private
+        FElement: TFresnelElement;
+        procedure SetElement(const AValue: TFresnelElement);
+      protected
+        procedure Notification(AComponent: TComponent; Operation: TOperation); override;
+      public
+        property Element: TFresnelElement read FElement write SetElement;
+      end;
+
+  public
+    MainDiv: TDiv;
+    ElementsTree: TDiv;
+    ElementStyles: TDiv;
+    TargetRoot: TElementNode;
+    constructor Create(AOwner: TComponent); override;
+    property TargetViewPort: TFresnelViewport read FTargetViewPort write SetTargetViewPort;
+  end;
+
+var
+  FresnelCSSView: TFresnelCSSView;
+
+implementation
+
+{$R *.lfm}
+
+{ TFresnelCSSView }
+
+procedure TFresnelCSSView.SetTargetViewPort(const AValue: TFresnelViewport);
+begin
+  if FTargetViewPort=AValue then Exit;
+  if FTargetViewPort<>nil then
+    RemoveFreeNotification(FTargetViewPort);
+  FTargetViewPort:=AValue;
+  if FTargetViewPort<>nil then
+    FreeNotification(FTargetViewPort);
+  UpdateTree;
+end;
+
+procedure TFresnelCSSView.Notification(AComponent: TComponent; Operation: TOperation);
+begin
+  inherited Notification(AComponent, Operation);
+  if Operation=opRemove then
+  begin
+    if FTargetViewPort=AComponent then
+      FTargetViewPort:=nil;
+  end;
+end;
+
+procedure TFresnelCSSView.UpdateTree;
+begin
+  if TargetViewPort=nil then
+  begin
+    FreeAndNil(TargetRoot);
+    exit;
+  end;
+
+end;
+
+constructor TFresnelCSSView.Create(AOwner: TComponent);
+begin
+  inherited Create(AOwner);
+
+  MainDiv:=TDiv.Create(Self);
+  with MainDiv do begin
+    Name:='MainDiv';
+    Style:='display: flex;';
+    Parent:=Self;
+  end;
+
+  ElementsTree:=TDiv.Create(Self);
+  with ElementsTree do begin
+    Name:='ElementsTree';
+    Style:='justify-self: 50%; border: 1px solid black; padding: 6px; flex-grow: 1;';
+    Parent:=MainDiv;
+  end;
+
+  ElementStyles:=TDiv.Create(Self);
+  with ElementStyles do begin
+    Name:='ElementStyles';
+    Style:='justify-self: 50%; border: 1px solid black; padding: 6px; flex-grow: 1;';
+    Parent:=MainDiv;
+  end;
+end;
+
+{ TFresnelCSSView.TElementNode }
+
+procedure TFresnelCSSView.TElementNode.SetElement(const AValue: TFresnelElement);
+begin
+  if FElement=AValue then Exit;
+  if FElement<>nil then
+    RemoveFreeNotification(FElement);
+  FElement:=AValue;
+  if FElement<>nil then
+    FreeNotification(FElement);
+end;
+
+procedure TFresnelCSSView.TElementNode.Notification(AComponent: TComponent; Operation: TOperation);
+begin
+  inherited Notification(AComponent, Operation);
+  if Operation=opRemove then
+  begin
+    if FElement=AComponent then
+      FElement:=nil;
+  end;
+end;
+
+end.
+

demo/lcl/CSSViewer/mainunit.lfm

@@ -0,0 +1,9 @@
+object Form1: TForm1
+  Left = 240
+  Height = 240
+  Top = 250
+  Width = 320
+  Caption = 'Form1'
+  LCLVersion = '4.99.0.0'
+  OnCreate = FormCreate
+end

demo/lcl/CSSViewer/mainunit.pas

@@ -0,0 +1,45 @@
+unit MainUnit;
+
+{$mode objfpc}{$H+}
+
+interface
+
+uses
+  Classes, SysUtils, Forms, Controls, Graphics, Dialogs, Unit1, Fresnel.CSSView;
+
+type
+
+  { TForm1 }
+
+  TForm1 = class(TForm)
+    procedure FormCreate(Sender: TObject);
+  private
+    procedure OnQueued({%H-}Data: PtrInt);
+
+  public
+
+  end;
+
+var
+  Form1: TForm1;
+
+implementation
+
+{$R *.lfm}
+
+{ TForm1 }
+
+procedure TForm1.FormCreate(Sender: TObject);
+begin
+  Application.QueueAsyncCall(@OnQueued,0);
+end;
+
+procedure TForm1.OnQueued(Data: PtrInt);
+begin
+  FresnelCSSView:=TFresnelCSSView.Create(Self);
+  FresnelCSSView.Show;
+  FresnelCSSView.TargetViewPort:=FresnelForm1;
+end;
+
+end.
+

demo/lcl/CSSViewer/unit1.lfm

@@ -0,0 +1,21 @@
+object FresnelForm1: TFresnelForm1
+  Style = 'position:absolute; box-sizing:border-box; left:240px; top:10px; width:320px; height:240px'
+  FormLeft = 358
+  FormTop = 223
+  FormWidth = 370
+  FormHeight = 301
+  Stylesheet.Strings = (
+    'div {'
+    '  border: 1px solid blue;'
+    '}'
+  )
+  object Body1: TBody
+    object Div1: TDiv
+      Style = 'position:absolute; box-sizing:border-box; left:16px; top:2px; width:320px; height:80px'
+      object Label1: TLabel
+        Style = 'position:absolute; box-sizing:border-box; left:26px; top:18px'
+        Caption = 'Label1'
+      end
+    end
+  end
+end

demo/lcl/CSSViewer/unit1.pas

@@ -0,0 +1,32 @@
+unit Unit1;
+
+{$mode ObjFPC}{$H+}
+
+interface
+
+uses
+  Classes, SysUtils, Fresnel.Classes, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls;
+
+type
+
+  { TFresnelForm1 }
+
+  TFresnelForm1 = class(TFresnelForm)
+    Body1: TBody;
+    Div1: TDiv;
+    Label1: TLabel;
+  private
+
+  public
+
+  end;
+
+var
+  FresnelForm1: TFresnelForm1;
+
+implementation
+
+{$R *.lfm}
+
+end.
+