Fresnel

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
• 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 lcl form
  • Done: property editor: viewport stylesheet, inline style
  • CSS errors
  • CSS completion box
  • view for exploring computed CSS attributes and errors
• Renderer-LCL:
  • Testsuite
  • colors: rgb, rgba, hsl, hsla
  • borders: color, style
  • invalidate changed containers, paint only parts
• Events
  • Done: AddEventListener, RemoveEventListener, CallEventListeners
  • mouse
  • keyboard
  • pseudo attribute :hover
• Skiafor 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
  • window
  • drawing
  • mouse events
  • keyboard events
  • idle
  • timer
• 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.
  • HTML importer