Difference between revisions of "Fresnel"

From Free Pascal wiki
Jump to navigationJump to search
 
(20 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
  
 
Requirements: fpc 3.3.1
 
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=
 
=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
−
** Extend TReader to search component classes using Field names
+
** Done: Extend TReader to search component classes using Field names
−
** Extend RTL format to optionally write unitnames: <s>TWriter</s>, <s>ObjectBinaryToText</s>, <s>GetClass(anUnitName,aClassName)</s>
+
** Done: Extend RTL format to optionally write unitnames: TWriter, ObjectBinaryToText, GetClass(anUnitName,aClassName)
−
** Extend RTL format to automatically detect the new format with unitnames: <s>TReader</s>, <s>ObjectTextToBinary</s>
+
** 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 28: 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
−
** mouse
+
** Done: AddEventListener, RemoveEventListener, CallEventListeners
 +
** 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 67: 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 73: 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"