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 TFresnelDiv, TFresnelSpan and TFresnelButton 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 TFresnelDiv, TFresnelSpan and TFresnelCustomLabel
• 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.
• TFresnelDiv - a TFresnelElement similar to HTML div element, i.e. block
• TFresnelSpan - a TFresnelElement similar to HTML span element, i.e. inline
• TFresnelReplacedElement - a TFresnelElement leaf node
• TCustomFresnelLabel - a TFresnelReplacedElement with a Caption property, the text specifies the min-width and min-height and is rendered.
• TFresnelLabel - a TCustomFresnelLabel with published properties
• TFresnelBody - a TFresnelElement, similar to HTML body element
• Unit FresnelLCLControls providing controls for using the Fresnel framework in a LCL application.

Roadmap

• Rename TFresnelButton to TButton, 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
  • Extend codetools lfm parser
  • Extend Lazarus lfm repair wizard
  • Extend Lazarus TReader.OnFindComponentClassEx to load lfms without unitnames even if fresnel TButton is registered
  • Extend all Lazarus GetClass places to query with unitname
• 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
  • property editor: viewport stylesheet
  • property editor: inline style
  • 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
  • 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 and span: already tested in Layouter and Renderer
  • label
  • link (CSS a), pseudo elements: :active, :link, :visited
  • image (CSS img)
  • edit aka input type=text
  • textarea
• Other:
  • CSS attribute "all"
  • CSS variables
  • background gradient
  • background image
  • stylesheets for windows, linux, macos
  • lists
  • special funding page on foundation site.
  • HTML importer