CStyle Plugins
Plugins add the ability to choose what parts of the HTML/CSS spec you add to your application. If you are trying to keep compile sizes small you can remove as many as you need to reach your target size. Here we will go over the basics of how they work and how to use them.
1type Plugin struct {
2 Styles map[string]string
3 Level int
4 Handler func(*element.Node, *map[string]element.State)
5}
A plugin is a struct defined in CStyle, in contains three properties:
- Styles
- A map with CSS properties and values that the plugin should match on. There is also support for wildcard properties by setting the value to "*"
- Level
- Level of priority in which to execute
- All library level should be between 0 and 2
- All others should be greater than 2
- Handler
- Callback function that provides a pointer to a element that matches the properties of Styles
# AddPlugin?(go)
Add Plugin is the CStyle function that add the plugin to the top level cstyle.Plugins array where it is used within the ComputeNodeStyle function.
# Usage
1css.AddPlugin(block.Init())
The first step in processing the plugins before running there handler functions is to sort them by their levels. We need to sort the plugins by their level because in the example of flex, it relys on a parent element being block position so it can compute styles based of the positioning of its parent elements. If flex was ran before block then it would have nothing to build apon. This is also the reason that if you are building a custom plugin it is reccomended to keep the level above 2 as anything after 2 will have the assumed styles to build apon.
// Sorting the array by the Level field sort.Slice(plugins, func(i, j int) bool { return plugins[i].Level < plugins[j].Level })
After we have the sorted plugins we can check if the current element matches the Styles of the plugin. The matching is a all of nothing matching system, if one property is missing then the plugin wil not be ran. If it does match then a pointer to the element.Node (n) is passed to the handler.
for _, v := range plugins { matches := true for name, value := range v.Styles { if styleMap[name] != value && !(value == "*") { matches = false } } if matches { v.Handler(n) } }
# plugins/block
Here is the code for the block styling plugin, it is recommended to keep this standard format.
All other plugins can be found in the cstyle/plugins folder
1package block
2
3import (
4 "gui/cstyle"
5 "gui/element"
6 "gui/utils"
7)
8
9func Init() cstyle.Plugin {
10 return cstyle.Plugin{
11 Styles: map[string]string{
12 "display": "block",
13 },
14 Level: 1,
15 Handler: func(n *element.Node, state *map[string]element.State) {
16 s := *state
17 self := s[n.Properties.Id]
18 parent := s[n.Parent.Properties.Id]
19
20 // If the element is display block and the width is unset then make it 100%
21
22 if n.Style["width"] == "" {
23 self.Width, _ = utils.ConvertToPixels("100%", self.EM, parent.Width)
24 }
25 m := utils.GetMP(*n, "margin")
26 self.Width -= (m.Right + m.Left)
27 self.Height -= (m.Top + m.Bottom)
28
29 p := utils.GetMP(*n, "padding")
30 self.Width += (p.Right + p.Left)
31 self.Height += (p.Top + p.Bottom)
32
33 (*state)[n.Properties.Id] = self
34 },
35 }
36}
1package cstyle
2
3// package aui/goldie
4// https://pkg.go.dev/automated.sh/goldie
5// https://pkg.go.dev/automated.sh/aui
6// https://pkg.go.dev/automated.sh/oat
7
8import (
9 "fmt"
10 "gui/color"
11 "gui/element"
12 "gui/font"
13 "gui/parser"
14 "gui/utils"
15 "os"
16 "slices"
17 "sort"
18 "strings"
19)
20
21type Plugin struct {
22 Styles map[string]string
23 Level int
24 Handler func(*element.Node, *map[string]element.State)
25}
26
27type CSS struct {
28 Width float32
29 Height float32
30 StyleSheets []map[string]map[string]string
31 Plugins []Plugin
32 Document *element.Node
33}
34
35func (c *CSS) StyleSheet(path string) {
36 // Parse the CSS file
37 dat, err := os.ReadFile(path)
38 utils.Check(err)
39 styles := parser.ParseCSS(string(dat))
40
41 c.StyleSheets = append(c.StyleSheets, styles)
42}
43
44func (c *CSS) StyleTag(css string) {
45 styles := parser.ParseCSS(css)
46 c.StyleSheets = append(c.StyleSheets, styles)
47}
48
49var inheritedProps = []string{
50 "color",
51 "cursor",
52 "font",
53 "font-family",
54 "font-size",
55 "font-style",
56 "font-weight",
57 "letter-spacing",
58 "line-height",
59 "text-align",
60 "text-indent",
61 "text-justify",
62 "text-shadow",
63 "text-transform",
64 "visibility",
65 "word-spacing",
66 "display",
67}
68
69func (c *CSS) GetStyles(n element.Node) map[string]string {
70 styles := map[string]string{}
71
72 if n.Parent != nil {
73 ps := c.GetStyles(*n.Parent)
74 for _, v := range inheritedProps {
75 if ps[v] != "" {
76 styles[v] = ps[v]
77 }
78 }
79 }
80 for k, v := range n.Style {
81 styles[k] = v
82 }
83 hovered := false
84 if slices.Contains(n.ClassList.Classes, ":hover") {
85 hovered = true
86 }
87
88 for _, styleSheet := range c.StyleSheets {
89 for selector := range styleSheet {
90 // fmt.Println(selector, n.Properties.Id)
91 key := selector
92 if strings.Contains(selector, ":hover") && hovered {
93 selector = strings.Replace(selector, ":hover", "", -1)
94 }
95 if element.TestSelector(selector, &n) {
96 for k, v := range styleSheet[key] {
97 styles[k] = v
98 }
99 }
100
101 }
102 }
103
104 // !ISSUE: why is this needed, the "attribute" is n.Style that should be mapped during init
105 // + when a user adds a style via the style attirbute it will just be in the .Style prop...
106 inline := parser.ParseStyleAttribute(n.GetAttribute("style") + ";")
107 styles = utils.Merge(styles, inline)
108 // add hover and focus css events
109
110 return styles
111}
112
113func (c *CSS) AddPlugin(plugin Plugin) {
114 c.Plugins = append(c.Plugins, plugin)
115}
116
117func CheckNode(n *element.Node, state *map[string]element.State) {
118 s := *state
119 self := s[n.Properties.Id]
120
121 fmt.Println(n.TagName, n.Properties.Id)
122 fmt.Printf("ID: %v\n", n.Id)
123 fmt.Printf("Parent: %v\n", n.Parent.TagName)
124 fmt.Printf("Classes: %v\n", n.ClassList.Classes)
125 fmt.Printf("Text: %v\n", self.Text.Text)
126 fmt.Printf("X: %v, Y: %v\n", self.X, self.Y)
127 fmt.Printf("Width: %v, Height: %v\n", self.Width, self.Height)
128 fmt.Printf("Styles: %v\n", n.Style)
129 fmt.Printf("Background: %v\n", self.Background)
130 fmt.Printf("Border: %v\n\n\n", self.Border)
131}
132
133func (c *CSS) ComputeNodeStyle(n *element.Node, state *map[string]element.State) *element.Node {
134 // Head is not renderable
135 if utils.IsParent(*n, "head") {
136 return n
137 }
138 plugins := c.Plugins
139 // !ISSUE: This should add to state.Style instead as the element.Node should be un effected by the engine
140 // + currently this adds styles to the style attribute that the use did not explisitly set
141 // + this also applies to the margin/padding and border completer functions
142
143 n.Style = c.GetStyles(*n)
144 s := *state
145 self := s[n.Properties.Id]
146 parent := s[n.Parent.Properties.Id]
147
148 self.Background = color.Parse(n.Style, "background")
149 self.Border, _ = CompleteBorder(n.Style)
150
151 fs, _ := utils.ConvertToPixels(n.Style["font-size"], parent.EM, parent.Width)
152 self.EM = fs
153
154 if n.Style["display"] == "none" {
155 self.X = 0
156 self.Y = 0
157 self.Width = 0
158 self.Height = 0
159 return n
160 }
161
162 wh := utils.GetWH(*n)
163 width := wh.Width
164 height := wh.Height
165
166 x, y := parent.X, parent.Y
167
168 var top, left, right, bottom bool = false, false, false, false
169
170 m := utils.GetMP(*n, "margin")
171 p := utils.GetMP(*n, "padding")
172
173 self.Margin = m
174 self.Padding = p
175
176 if n.Style["position"] == "absolute" {
177 bas := utils.GetPositionOffsetNode(n)
178 base := s[bas.Properties.Id]
179 if n.Style["top"] != "" {
180 v, _ := utils.ConvertToPixels(n.Style["top"], self.EM, parent.Width)
181 y = v + base.Y
182 top = true
183 }
184 if n.Style["left"] != "" {
185 v, _ := utils.ConvertToPixels(n.Style["left"], self.EM, parent.Width)
186 x = v + base.X
187 left = true
188 }
189 if n.Style["right"] != "" {
190 v, _ := utils.ConvertToPixels(n.Style["right"], self.EM, parent.Width)
191 x = (base.Width - width) - v
192 right = true
193 }
194 if n.Style["bottom"] != "" {
195 v, _ := utils.ConvertToPixels(n.Style["bottom"], self.EM, parent.Width)
196 y = (base.Height - height) - v
197 bottom = true
198 }
199 } else {
200 for i, v := range n.Parent.Children {
201 if v.Properties.Id == n.Properties.Id {
202 if i-1 > 0 {
203 sib := n.Parent.Children[i-1]
204 sibling := s[sib.Properties.Id]
205 if n.Style["display"] == "inline" {
206 if sib.Style["display"] == "inline" {
207 y = sibling.Y
208 } else {
209 y = sibling.Y + sibling.Height
210 }
211 } else {
212 y = sibling.Y + sibling.Height
213 }
214 }
215 break
216 } else if n.Style["display"] != "inline" {
217 vState := s[v.Properties.Id]
218 y += vState.Margin.Top + vState.Margin.Bottom + vState.Padding.Top + vState.Padding.Bottom + vState.Height
219 }
220 }
221 }
222
223 // Display modes need to be calculated here
224
225 relPos := !top && !left && !right && !bottom
226
227 if left || relPos {
228 x += m.Left
229 }
230 if top || relPos {
231 y += m.Top
232 }
233 if right {
234 x -= m.Right
235 }
236 if bottom {
237 y -= m.Bottom
238 }
239
240 // fmt.Println(n.InnerText, len(n.Children))
241
242 if !utils.ChildrenHaveText(n) {
243 // Confirm text exists
244 if len(n.InnerText) > 0 {
245 innerWidth := width
246 innerHeight := height
247 (*state)[n.Properties.Id] = self
248 self = genTextNode(n, &innerWidth, &innerHeight, p, state)
249 width = innerWidth + p.Left + p.Right
250 height = innerHeight
251 }
252 }
253
254 self.X = x
255 self.Y = y
256 self.Width = width
257 self.Height = height
258
259 (*state)[n.Properties.Id] = self
260 (*state)[n.Parent.Properties.Id] = parent
261
262 // Call children here
263
264 var childYOffset float32
265 for i, v := range n.Children {
266 v.Parent = n
267 n.Children[i] = *c.ComputeNodeStyle(&v, state)
268 cState := (*state)[n.Children[i].Properties.Id]
269 if n.Style["height"] == "" {
270 if n.Children[i].Style["position"] != "absolute" && cState.Y > childYOffset {
271 childYOffset = cState.Y
272 self.Height += cState.Height
273 self.Height += cState.Margin.Top
274 self.Height += cState.Margin.Bottom
275 self.Height += cState.Padding.Top
276 self.Height += cState.Padding.Bottom
277 }
278 }
279 // fmt.Println(n.TagName, self.Width, v.TagName, cState.Width)
280 if cState.Width > self.Width {
281 self.Width = cState.Width
282 }
283 }
284
285 (*state)[n.Properties.Id] = self
286
287 // Sorting the array by the Level field
288 sort.Slice(plugins, func(i, j int) bool {
289 return plugins[i].Level < plugins[j].Level
290 })
291
292 for _, v := range plugins {
293 matches := true
294 for name, value := range v.Styles {
295 if n.Style[name] != value && !(value == "*") {
296 matches = false
297 }
298 }
299 if matches {
300 v.Handler(n, state)
301 }
302 }
303
304 // CheckNode(n, state)
305
306 return n
307}
308
309func parseBorderShorthand(borderShorthand string) (element.Border, error) {
310 // Split the shorthand into components
311 borderComponents := strings.Fields(borderShorthand)
312
313 // Ensure there are at least 1 component (width or style or color)
314 if len(borderComponents) >= 1 {
315 width := "0px" // Default width
316 style := "solid"
317 borderColor := "#000000" // Default color
318
319 // Extract style and color if available
320 if len(borderComponents) >= 1 {
321 width = borderComponents[0]
322 }
323
324 // Extract style and color if available
325 if len(borderComponents) >= 2 {
326 style = borderComponents[1]
327 }
328 if len(borderComponents) >= 3 {
329 borderColor = borderComponents[2]
330 }
331
332 parsedColor, _ := color.Color(borderColor)
333
334 return element.Border{
335 Width: width,
336 Style: style,
337 Color: parsedColor,
338 Radius: "", // Default radius
339 }, nil
340 }
341
342 return element.Border{}, fmt.Errorf("invalid border shorthand format")
343}
344
345func CompleteBorder(cssProperties map[string]string) (element.Border, error) {
346 border, err := parseBorderShorthand(cssProperties["border"])
347 border.Radius = cssProperties["border-radius"]
348
349 return border, err
350}
351
352func genTextNode(n *element.Node, width, height *float32, p element.MarginPadding, state *map[string]element.State) element.State {
353 s := *state
354 self := s[n.Properties.Id]
355 parent := s[n.Parent.Properties.Id]
356
357 bold, italic := false, false
358
359 if n.Style["font-weight"] == "bold" {
360 bold = true
361 }
362
363 if n.Style["font-style"] == "italic" {
364 italic = true
365 }
366
367 if self.Text.Font == nil {
368 f, _ := font.LoadFont(n.Style["font-family"], int(self.EM), bold, italic)
369 self.Text.Font = f
370 }
371
372 letterSpacing, _ := utils.ConvertToPixels(n.Style["letter-spacing"], self.EM, *width)
373 wordSpacing, _ := utils.ConvertToPixels(n.Style["word-spacing"], self.EM, *width)
374 lineHeight, _ := utils.ConvertToPixels(n.Style["line-height"], self.EM, *width)
375 if lineHeight == 0 {
376 lineHeight = self.EM + 3
377 }
378
379 self.Text.LineHeight = int(lineHeight)
380 self.Text.WordSpacing = int(wordSpacing)
381 self.Text.LetterSpacing = int(letterSpacing)
382 wb := " "
383
384 if n.Style["word-wrap"] == "break-word" {
385 wb = ""
386 }
387
388 if n.Style["text-wrap"] == "wrap" || n.Style["text-wrap"] == "balance" {
389 wb = ""
390 }
391
392 var dt float32
393
394 if n.Style["text-decoration-thickness"] == "auto" || n.Style["text-decoration-thickness"] == "" {
395 dt = 3
396 } else {
397 dt, _ = utils.ConvertToPixels(n.Style["text-decoration-thickness"], self.EM, *width)
398 }
399
400 col := color.Parse(n.Style, "font")
401
402 self.Text.Color = col
403 self.Text.DecorationColor = color.Parse(n.Style, "decoration")
404 self.Text.Align = n.Style["text-align"]
405 self.Text.WordBreak = wb
406 self.Text.WordSpacing = int(wordSpacing)
407 self.Text.LetterSpacing = int(letterSpacing)
408 self.Text.WhiteSpace = n.Style["white-space"]
409 self.Text.DecorationThickness = int(dt)
410 self.Text.Overlined = n.Style["text-decoration"] == "overline"
411 self.Text.Underlined = n.Style["text-decoration"] == "underline"
412 self.Text.LineThrough = n.Style["text-decoration"] == "linethrough"
413 self.Text.EM = int(self.EM)
414 self.Text.Width = int(parent.Width)
415 self.Text.Text = n.InnerText
416
417 if n.Style["word-spacing"] == "" {
418 self.Text.WordSpacing = font.MeasureSpace(&self.Text)
419 }
420 if parent.Width != 0 && n.Style["display"] != "inline" && n.Style["width"] == "" {
421 *width = (parent.Width - p.Right) - p.Left
422 } else if n.Style["width"] == "" {
423 *width = utils.Max(*width, float32(font.MeasureLongest(&self)))
424 } else if n.Style["width"] != "" {
425 *width, _ = utils.ConvertToPixels(n.Style["width"], self.EM, parent.Width)
426 }
427
428 self.Text.Width = int(*width)
429 self.Width = *width
430 h := font.Render(&self)
431 if n.Style["height"] == "" {
432 *height = h
433 }
434
435 return self
436
437}