Fresnel: what changed
Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.
Title: Fresnel
| Old | New | Line | |
|---|---|---|---|
| 1 | + | # Overview | |
| 2 | + | ||
| 3 | + | Fresnel is a visual component library based on CSS and custom drawn components. It is in an early stage of development. | |
| 4 | + | ||
| 5 | + | git repo: <https://gitlab.com/freepascal.org/lazarus/fresnel> | |
| 6 | + | ||
| 7 | + | Requirements: fpc 3.3.1 | |
| 8 | + | ||
| 9 | + | # What is working? | |
| 10 | + | ||
| 11 | + | As Fresnel is still in an early pre-alpha stage, a few things do work already: | |
| 12 | + | ||
| 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. | |
| 36 | + | ||
| 37 | + | # Roadmap | |
| 38 | + | ||
| 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 | |
| 113 | + | ||
| 114 | + | --- | |
| 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).* |