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 think do work already:

• fcl-css supports most basic CSS features, even some CSS-5 feats
• A Lazarus package src/fresnel.lpk containing basic classes:
  • 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.
  • 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.

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