Difference between revisions of "Fresnel"

From Free Pascal wiki
Jump to navigationJump to search
 
(16 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
=Overview=
 
=Overview=
 +
Fresnel is a visual component library based on CSS and custom drawn components. It is in an early stage of development.
  
−
Fresnel is a visual component library based on CSS and custom drawn components. It is in an early stage of development.
 
  
 
git repo: https://gitlab.com/freepascal.org/lazarus/fresnel
 
git repo: https://gitlab.com/freepascal.org/lazarus/fresnel
Line 9: Line 9:
 
=What is working?=
 
=What is working?=
  
−
As Fresnel is still in an early pre-alpha stage, a few think do work already:
+
As Fresnel is still in an early pre-alpha stage, a few things do work already:
  
 
* fcl-css supports most basic CSS features, even some CSS-5 feats
 
* fcl-css supports most basic CSS features, even some CSS-5 feats
−
* A Lazarus package src/fresnel.lpk containing basic classes:
+
* A Lazarus package src/fresnel.lpk containing the runtime units for standalone applications.
−
** TFresnelElement - a TComponent that works similar to an HTML element, supporting many common CSS attributes like border, padding, margin, etc, have inline CSS in the ''Style'' property and CSS classes in the CSSClasses property. Elements can have child elements, building a tree similar to the browser DOM. CSS attributes are evaluated to their ''computed'' values. You can define descend ants adding their own CSS attributes. See for example TFresnelDiv, TFresnelSpan and TFresnelButton.
+
* A Lazarus package src/lcl/fresnellcl.lpk containing the runtime units for Fresnel inside a LCL applications.
−
** TFresnelViewport - a TFresnelElement that is the root of the tree. It defines the Width and Height of the rendering area and a FontEngine. It contains a CSS ''StyleSheet'' property, which is applied to all its child elements, but the CSS has no effect on the viewport itself. It contains a Layouter, which computes all the element render boxes and has a puggable system to support various node layouters.
+
* A Lazarus designtime package design/fresneldsgn.lpk registering a Fresnel Form, allowing to put TBody, TDiv, TSpan, etc onto the designer.
 +
* TFresnelElement
 +
** a TComponent that works similar to an HTML element
 +
** supports many common CSS attributes like border, padding, margin, etc
 +
** has inline CSS in the ''Style'' property and CSS classes in the CSSClasses property
 +
** Elements can have child elements, building a tree similar to the browser DOM.
 +
** CSS attributes are evaluated to their ''computed'' values.
 +
** You can define descendants adding their own CSS attributes. See for example TDiv, TSpan and TCustomLabel
 +
* TFresnelViewport
 +
** a TFresnelElement that is the root of the tree.
 +
** Defines the Width and Height of the rendering area and a FontEngine.
 +
** Contains a CSS ''StyleSheet'' property, which is applied to all its child elements, but the CSS has no effect on the viewport itself.
 +
** Contains a Layouter, which computes all the element render boxes and has a pluggable system to support various node layouters - needed for flao, flex and grid layuout. Currently only a rudimentary flow nodelayouter is implemented.
 +
* TDiv - a TFresnelElement similar to HTML div element, i.e. block
 +
* TSpan - a TFresnelElement similar to HTML span element, i.e. inline
 +
* TReplacedElement - a TFresnelElement leaf node
 +
* TCustomLabel - a TReplacedElement with a Caption property, the text specifies the min-width and min-height and is rendered.
 +
* TLabel - a TCustomLabel with published properties
 +
* TBody - a TElement, similar to HTML body element
 +
* Unit Fresnel.LCLControls providing controls for using the Fresnel framework in a LCL application.
  
 
=Roadmap=
 
=Roadmap=
  
−
* Rename TFresnelButton to TButton, this requires Lazarus to support duplicate component classnames
+
* Done: Rename TFresneLabel to TLabel, this requires Lazarus to support duplicate component classnames
 
** Done: Extend TReader to search component classes using Field names
 
** Done: Extend TReader to search component classes using Field names
 
** Done: Extend RTL format to optionally write unitnames: TWriter, ObjectBinaryToText, GetClass(anUnitName,aClassName)
 
** Done: Extend RTL format to optionally write unitnames: TWriter, ObjectBinaryToText, GetClass(anUnitName,aClassName)
 
** Done: Extend RTL format to automatically detect the new format with unitnames: TReader, ObjectTextToBinary
 
** Done: Extend RTL format to automatically detect the new format with unitnames: TReader, ObjectTextToBinary
−
** Extend codetools lfm parser
+
** Done: codetools lfm parser
−
** Extend Lazarus lfm repair wizard
+
** Done: Lazarus TReader.OnFindComponentClassEx to load lfms without unitnames even if fresnel TButton is registered
−
** Extend Lazarus TReader.OnFindComponentClassEx to load lfms without unitnames even if fresnel TButton is registered
+
** Done: Extend component palette and component list
−
** Extend all Lazarus GetClass places to query with unitname
+
** Done: Component icons with unitnames
 +
** Done: when dropping a component on designer: prepend unitname to classtype if needed
 +
** Done: load lfm in designer: commpute/parse to handle ambiguous classes
 +
** ToDo: Lazarus lfm repair wizard
 +
** ToDo: all Lazarus GetClass places to query with unitname
 +
** ToDo: extend tool Change Class
 
* Layouter:
 
* Layouter:
 
** Testsuite
 
** Testsuite
Line 37: Line 61:
 
** Grid layouter
 
** Grid layouter
 
** Overflow: scrolling, clipping
 
** Overflow: scrolling, clipping
−
* Fresnel lcl form
+
* Fresnel in Lazarus designer:
−
** property editor: viewport stylesheet
+
** Done: property editor: viewport stylesheet, inline style
−
** property editor: inline style
+
** CSS errors
 +
** CSS completion box
 
** view for exploring computed CSS attributes and errors
 
** view for exploring computed CSS attributes and errors
 +
** macos keyboard shortcuts
 
* Renderer-LCL:
 
* Renderer-LCL:
 
** Testsuite
 
** Testsuite
 
** colors: rgb, rgba, hsl, hsla
 
** colors: rgb, rgba, hsl, hsla
−
** borders: color, style
+
** borders: style
 +
** invalidate changed containers, paint only parts
 +
* Renderer-Skia:
 +
** [https://skia.org/ Skia]
 +
** Testsuite
 +
** colors: rgb, rgba, hsl, hsla
 +
** borders: style
 
** invalidate changed containers, paint only parts
 
** invalidate changed containers, paint only parts
 
* Events
 
* Events
−
** AddEventListener, RemoveEventListener, CallEventListeners
+
** Done: AddEventListener, RemoveEventListener, CallEventListeners
−
** mouse
+
** Done: Mouse Down/Move/Up and Click
 +
** mouse leave/enter
 
** keyboard
 
** keyboard
 
** pseudo attribute :hover
 
** pseudo attribute :hover
−
* [https://skia.org/ Skia]for LCL custom drawn widgetset,
 
−
** Testsuite
 
−
** opacity
 
−
** colors: rgb, rgba, hsl, hsla
 
−
** borders: width, color, style
 
−
** background: color
 
−
** font
 
−
** invalidate changed containers, paint only parts
 
 
* Fresnel backend
 
* Fresnel backend
−
** window
+
** cocoa
−
** drawing
+
** gtk3: creating windows and some events: mouse+draw
−
** mouse events
+
** lcl: creating windows and some events: mouse+draw
−
** keyboard events
+
** winapi
−
** idle
 
−
** timer
 
 
* Animation
 
* Animation
 
* Fresnel components:
 
* Fresnel components:
 
** Testsuite
 
** Testsuite
−
** div and span: already tested in Layouter and Renderer
+
*** div, span, label
−
** label
+
** label multi line
 
** link (CSS a), pseudo elements: :active, :link, :visited
 
** link (CSS a), pseudo elements: :active, :link, :visited
 
** image (CSS img)
 
** image (CSS img)
Line 77: Line 100:
 
* Other:
 
* Other:
 
** CSS attribute "all"
 
** CSS attribute "all"
 +
** CSS function "calc"
 
** CSS variables
 
** CSS variables
 +
** CSS selector @media
 
** background gradient
 
** background gradient
 
** background image
 
** background image
Line 83: Line 108:
 
** lists
 
** lists
 
** special funding page on foundation site.
 
** special funding page on foundation site.
 +
** optimizations for big tables
 +
*** storing css attributes for sets of rules
 
** HTML importer
 
** HTML importer

Latest revision as of 09:22, 23 September 2023

Overview

Fresnel is a visual component library based on CSS and custom drawn components. It is in an early stage of development.


git repo: https://gitlab.com/freepascal.org/lazarus/fresnel

Requirements: fpc 3.3.1

What is working?

As Fresnel is still in an early pre-alpha stage, a few things do work already:

  • fcl-css supports most basic CSS features, even some CSS-5 feats
  • A Lazarus package src/fresnel.lpk containing the runtime units for standalone applications.
  • A Lazarus package src/lcl/fresnellcl.lpk containing the runtime units for Fresnel inside a LCL applications.
  • A Lazarus designtime package design/fresneldsgn.lpk registering a Fresnel Form, allowing to put TBody, TDiv, TSpan, etc onto the designer.
  • TFresnelElement
    • a TComponent that works similar to an HTML element
    • supports many common CSS attributes like border, padding, margin, etc
    • has inline CSS in the Style property and CSS classes in the CSSClasses property
    • Elements can have child elements, building a tree similar to the browser DOM.
    • CSS attributes are evaluated to their computed values.
    • You can define descendants adding their own CSS attributes. See for example TDiv, TSpan and TCustomLabel
  • TFresnelViewport
    • a TFresnelElement that is the root of the tree.
    • Defines the Width and Height of the rendering area and a FontEngine.
    • Contains a CSS StyleSheet property, which is applied to all its child elements, but the CSS has no effect on the viewport itself.
    • Contains a Layouter, which computes all the element render boxes and has a pluggable system to support various node layouters - needed for flao, flex and grid layuout. Currently only a rudimentary flow nodelayouter is implemented.
  • TDiv - a TFresnelElement similar to HTML div element, i.e. block
  • TSpan - a TFresnelElement similar to HTML span element, i.e. inline
  • TReplacedElement - a TFresnelElement leaf node
  • TCustomLabel - a TReplacedElement with a Caption property, the text specifies the min-width and min-height and is rendered.
  • TLabel - a TCustomLabel with published properties
  • TBody - a TElement, similar to HTML body element
  • Unit Fresnel.LCLControls providing controls for using the Fresnel framework in a LCL application.

Roadmap

  • Done: Rename TFresneLabel to TLabel, this requires Lazarus to support duplicate component classnames
    • Done: Extend TReader to search component classes using Field names
    • Done: Extend RTL format to optionally write unitnames: TWriter, ObjectBinaryToText, GetClass(anUnitName,aClassName)
    • Done: Extend RTL format to automatically detect the new format with unitnames: TReader, ObjectTextToBinary
    • Done: codetools lfm parser
    • Done: Lazarus TReader.OnFindComponentClassEx to load lfms without unitnames even if fresnel TButton is registered
    • Done: Extend component palette and component list
    • Done: Component icons with unitnames
    • Done: when dropping a component on designer: prepend unitname to classtype if needed
    • Done: load lfm in designer: commpute/parse to handle ambiguous classes
    • ToDo: Lazarus lfm repair wizard
    • ToDo: all Lazarus GetClass places to query with unitname
    • ToDo: extend tool Change Class
  • Layouter:
    • Testsuite
    • Flow layouter:
      • fragments for elements, needed for wordwrap and toolbars,
      • floats (left, right),
      • direction,
      • position relative+sticky,
      • line-height
    • Flex layouter
    • Grid layouter
    • Overflow: scrolling, clipping
  • Fresnel in Lazarus designer:
    • Done: property editor: viewport stylesheet, inline style
    • CSS errors
    • CSS completion box
    • view for exploring computed CSS attributes and errors
    • macos keyboard shortcuts
  • Renderer-LCL:
    • Testsuite
    • colors: rgb, rgba, hsl, hsla
    • borders: style
    • invalidate changed containers, paint only parts
  • Renderer-Skia:
    • Skia
    • Testsuite
    • colors: rgb, rgba, hsl, hsla
    • borders: style
    • invalidate changed containers, paint only parts
  • Events
    • Done: AddEventListener, RemoveEventListener, CallEventListeners
    • Done: Mouse Down/Move/Up and Click
    • mouse leave/enter
    • keyboard
    • pseudo attribute :hover
  • Fresnel backend
    • cocoa
    • gtk3: creating windows and some events: mouse+draw
    • lcl: creating windows and some events: mouse+draw
    • winapi
  • Animation
  • Fresnel components:
    • Testsuite
      • div, span, label
    • label multi line
    • link (CSS a), pseudo elements: :active, :link, :visited
    • image (CSS img)
    • edit aka input type=text
    • textarea
  • Other:
    • CSS attribute "all"
    • CSS function "calc"
    • CSS variables
    • CSS selector @media
    • background gradient
    • background image
    • stylesheets for windows, linux, macos
    • lists
    • special funding page on foundation site.
    • optimizations for big tables
      • storing css attributes for sets of rules
    • HTML importer
Retrieved from "http://wiki.freepascal.org/index.php?title=Fresnel&oldid=157354"