Sign in Join
Wiki copytemporary

Fresnel: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

OldNewLine
11# Overview
22
3-Fresnel is a visual component library based on CSS and custom drawn components. It is in an early stage of development.
3+Fresnel is a visual component library based on CSS and custom drawn components. It is in an early stage of development.
44
55git repo: <https://gitlab.com/freepascal.org/lazarus/fresnel>
66
7-Requirements: fpc 3.3.1
7+Requirements: fpc 3.2.2, for skia: fpc 3.3.1
88
9+## Platforms
10+
11+Fresnel runs natively on _Linux/gtk3_ and _Windows_ using _Skia_ and on _Webassembly_ in the browser. It is planned to write backends for other platforms as well.
12+
13+Fresnel forms can also run inside an LCL application. This allows to migrate LCL forms one by one. So, Fresnel runs everywhere the LCL runs. Skia can be used as renderer instead of the LCL canvas.
14+
15+Finally there is a LCL control, allowing to embed a Fresnel viewport as a control on a LCL form.
16+
17+## Documentation
18+
19+[[Fresnel CSS Algorithm]]
20+
921# What is working?
1022
11-As Fresnel is still in an early pre-alpha stage, a few things do work already:
23+As Fresnel is still in an early pre-alpha stage, a few things do work already:
1224
13-- fcl-css supports most basic CSS features, even some CSS-5 feats
14-- A Lazarus package src/fresnel.lpk containing the runtime units for standalone applications.
15-- A Lazarus package src/lcl/fresnellcl.lpk containing the runtime units for Fresnel inside a LCL applications.
16-- A Lazarus designtime package design/fresneldsgn.lpk registering a Fresnel Form, allowing to put TBody, TDiv, TSpan, etc onto the designer.
17-- TFresnelElement
18- - a TComponent that works similar to an HTML element
19- - supports many common CSS attributes like border, padding, margin, etc
20- - has inline CSS in the *Style* property and CSS classes in the CSSClasses property
21- - Elements can have child elements, building a tree similar to the browser DOM.
22- - CSS attributes are evaluated to their *computed* values.
23- - You can define descendants adding their own CSS attributes. See for example TDiv, TSpan and TCustomLabel
24-- TFresnelViewport
25- - a TFresnelElement that is the root of the tree.
26- - Defines the Width and Height of the rendering area and a FontEngine.
27- - Contains a CSS *StyleSheet* property, which is applied to all its child elements, but the CSS has no effect on the viewport itself.
28- - 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.
29-- TDiv - a TFresnelElement similar to HTML div element, i.e. block
30-- TSpan - a TFresnelElement similar to HTML span element, i.e. inline
31-- TReplacedElement - a TFresnelElement leaf node
32-- TCustomLabel - a TReplacedElement with a Caption property, the text specifies the min-width and min-height and is rendered.
33-- TLabel - a TCustomLabel with published properties
34-- TBody - a TElement, similar to HTML body element
35-- Unit Fresnel.LCLControls providing controls for using the Fresnel framework in a LCL application.
25+ * fcl-css supports big part of CSS parsing, even some CSS-5 feats (the actual attributes are done by TFresnelElement)
26+ * A Lazarus package src/fresnel.lpk containing the runtime units for standalone applications.
27+ * A Lazarus package src/lcl/fresnellcl.lpk containing the runtime units for Fresnel inside a LCL applications.
28+ * A Lazarus designtime package design/fresneldsgn.lpk registering a Fresnel Form, allowing to put TBody, TDiv, TSpan, etc onto the designer.
29+ * Current platforms:
30+ * Linux/Gtk3 with [[Skia]] \- for a native application
31+ * Windows with [[Skia]] \- for a native application
32+ * WebAssembly - for a website
33+ * Inside a LCL application as window: TFresnelForm - for LCL applications
34+ * Using LCL canvas for rendering (default)
35+ * Using Skia as renderer: add an _IDEMacro_ value _FresnelLCLRenderer:=skia_ to [[IDE Window: Compiler Options|Additions and Overrides]]
36+ * Inside a LCL form as control: TFresnelLCLControl - to embed Fresnel inside an LCL form
37+ * Lazarus Designer for TFresnelForm
38+ * TFresnelElement
39+ * a TComponent that works similar to an HTML element
40+ * supports many common CSS attributes like border, padding, margin, etc
41+ * has inline CSS in the _Style_ property and CSS classes in the CSSClasses property
42+ * Elements can have child elements, building a tree similar to the browser DOM.
43+ * CSS attributes are evaluated to their _computed_ values.
44+ * You can define descendants adding their own CSS attributes. See for example TCustomLabel
45+ * TFresnelViewport
46+ * a TFresnelElement that is the root of the tree.
47+ * Base class for TFresnelForm.
48+ * Defines the Width and Height of the rendering area.
49+ * Contains a CSS _StyleSheet_ property, which is applied to all its child elements. Like the _author_ css in a browser.
50+ * Contains a Layouter, which computes all the element render boxes and has a pluggable system to support various node layouters - needed for flow, flex and grid layuout.
51+ * TDiv - a TFresnelElement similar to HTML div element, i.e. block
52+ * TSpan - a TFresnelElement similar to HTML span element, i.e. inline
53+ * TReplacedElement - a TFresnelElement leaf node
54+ * TCustomLabel - a TReplacedElement with a Caption property, the text specifies the min-width and min-height and is rendered.
55+ * TLabel - a TCustomLabel with published properties
56+ * TBody - a TDiv, works similar to HTML body element. Only needed if you use some internet css stylesheet.
57+ * TImage - a TElement, similar to HTML img element
58+ * TFresnelForm - a window with a viewport
59+ * Unit Fresnel.LCLControls providing controls for using the Fresnel framework in a LCL application.
3660
61+
62+
63+## Skia
64+
65+ * On intel Mac:
66+
67+```
68+export DYLD_LIBRARY_PATH=/Users/USERNAME/pathtoyour/fresnel/bin/Binary/Shared/OSX6
69+```
70+
71+# Goals
72+
73+The main goals are at the moment:
74+
75+ * a CSS engine, capable of parsing common stylesheets and skipping unknown attributes and optionally log errors
76+ * scrolling and clipping
77+ * clipboard
78+ * drag&drop on a form, between forms, from external, to external
79+ * a text edit element
80+ * native Cocoa backend
81+ * CSS development tools
82+ * set form and application title
83+
3784# Roadmap
3885
39-- Done: Rename TFresneLabel to TLabel, this requires Lazarus to support duplicate component classnames
40- - Done: Extend TReader to search component classes using Field names
41- - Done: Extend RTL format to optionally write unitnames: TWriter, ObjectBinaryToText, GetClass(anUnitName,aClassName)
42- - Done: Extend RTL format to automatically detect the new format with unitnames: TReader, ObjectTextToBinary
43- - Done: codetools lfm parser
44- - Done: Lazarus TReader.OnFindComponentClassEx to load lfms without unitnames even if fresnel TButton is registered
45- - Done: Extend component palette and component list
46- - Done: Component icons with unitnames
47- - Done: when dropping a component on designer: prepend unitname to classtype if needed
48- - Done: load lfm in designer: commpute/parse to handle ambiguous classes
49- - ToDo: Lazarus lfm repair wizard
50- - ToDo: all Lazarus GetClass places to query with unitname
51- - ToDo: extend tool Change Class
52-- Layouter:
53- - Testsuite
54- - Flow layouter:
55- - fragments for elements, needed for wordwrap and toolbars,
56- - floats (left, right),
57- - direction,
58- - position relative+sticky,
59- - line-height
60- - Flex layouter
61- - Grid layouter
62- - Overflow: scrolling, clipping
63-- Fresnel in Lazarus designer:
64- - Done: property editor: viewport stylesheet, inline style
65- - CSS errors
66- - CSS completion box
67- - view for exploring computed CSS attributes and errors
68- - macos keyboard shortcuts
69-- Renderer-LCL:
70- - Testsuite
71- - colors: rgb, rgba, hsl, hsla
72- - borders: style
73- - invalidate changed containers, paint only parts
74-- Renderer-Skia:
75- - [Skia](https://skia.org/)
76- - Testsuite
77- - colors: rgb, rgba, hsl, hsla
78- - borders: style
79- - invalidate changed containers, paint only parts
80-- Events
81- - Done: AddEventListener, RemoveEventListener, CallEventListeners
82- - Done: Mouse Down/Move/Up and Click
83- - mouse leave/enter
84- - keyboard
85- - pseudo attribute :hover
86-- Fresnel backend
87- - cocoa
88- - gtk3: creating windows and some events: mouse+draw
89- - lcl: creating windows and some events: mouse+draw
90- - winapi
91-- Animation
92-- Fresnel components:
93- - Testsuite
94- - div, span, label
95- - label multi line
96- - link (CSS a), pseudo elements: :active, :link, :visited
97- - image (CSS img)
98- - edit aka input type=text
99- - textarea
100-- Other:
101- - CSS attribute "all"
102- - CSS function "calc"
103- - CSS variables
104- - CSS selector @media
105- - background gradient
106- - background image
107- - stylesheets for windows, linux, macos
108- - lists
109- - special funding page on foundation site.
110- - optimizations for big tables
111- - storing css attributes for sets of rules
112- - HTML importer
86+ * CSS engine:
87+ * A application wide CSS stylesheets with origin _user_.
88+ * CSS attributes are skipped if invalid. One log entry per CSS error.
89+ * CSS functions _calc, min, max, minmax, clamp_.
90+ * CSS selector @media
91+ * type styles should be collected only once
92+ * changing an inline style, should not re-compute everything
93+ * Extend Lazarus lfm repair wizard to support duplicate classnames
94+ * Extend Lazarus Change Class to support duplicate classnames
95+ * Layouter:
96+ * Flow layouter:
97+ * fragments for elements, needed for wordwrap and toolbars,
98+ * floats (left, right),
99+ * direction,
100+ * position sticky
101+ * line-height
102+ * align at baseline
103+ * Flex layouter:
104+ * wrap
105+ * Grid layouter
106+ * Overflow: scrolling, clipping
107+ * Fresnel in Lazarus designer:
108+ * CSS errors
109+ * CSS completion box
110+ * a view for exploring computed CSS attributes and errors
111+ * macos keyboard shortcuts
112+ * Renderer-LCL:
113+ * Testsuite
114+ * colors: rgb, rgba, hsl, hsla
115+ * borders: style
116+ * invalidate changed containers, paint only parts
117+ * Renderer-Skia:
118+ * [Skia](<https://skia.org/>)
119+ * Testsuite
120+ * colors: rgb, rgba, hsl, hsla
121+ * borders: style
122+ * invalidate changed containers, paint only parts
123+ * Mouse capture, drag and drop
124+ * Events
125+ * keyboard, focus, mouse wheel, minimize, maximize, restore, idle, clipboard
126+ * Fresnel backend
127+ * cocoa
128+ * Animation
129+ * Fresnel components:
130+ * label fragmentation aka multi line
131+ * link (CSS a), pseudo elements: :active, :link, :visited
132+ * edit aka input type=text
133+ * textarea
134+ * Other:
135+ * background image
136+ * stylesheets for windows, linux, macos
137+ * lists
138+ * special funding page on foundation site.
139+ * HTML importer
113140
114141---
115-*From the Free Pascal wiki, page "Fresnel", as it stood on 2023-09-23 after a change by Mattias2, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
142+*From the Free Pascal wiki, page "Fresnel", as the Internet Archive kept it on 2025-06-16, last changed on 2025-03-28. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*

Back to history