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.
The difference between plugins and transformers is, plugins have a order when they need to be executed and run after the state has been initialised. Transformers on the other hand require nothing but the DOM and the init style definitions. Transformers are used to transform things like an ul tag into a simpler div structure and plugins are used mainly to compute styles outside of the main function (see flex, inline, etc...).
1type Plugin struct {
2 Selector func(*element.Node) bool
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:
- Selector
- A function that determines if the plugin should run.
- 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)
7
8func Init() cstyle.Plugin {
9 return cstyle.Plugin{
10 Selector: func(n *element.Node) bool {
11 styles := map[string]string{
12 "display": "block",
13 }
14 matches := true
15 for name, value := range styles {
16 if n.Style[name] != value && !(value == "*") && n.Style[name] != "" {
17 matches = false
18 }
19 }
20 return matches
21 },
22 Level: 0,
23 Handler: func(n *element.Node, state *map[string]element.State) {
24 s := *state
25 self := s[n.Properties.Id]
26 // parent := s[n.Parent.Properties.Id]
27
28 // If the element is display block and the width is unset then make it 100%
29
30 // if self.Style["width"] == "" {
31 // self.Width, _ = utils.ConvertToPixels("100%", self.EM, parent.Width)
32 // fmt.Println(self.Margin)
33
34 // // self.Width -= (self.Padding.Right + self.Padding.Left)
35 // // self.Height -= (self.Padding.Top + self.Padding.Bottom)
36 // }
37
38 // if self.X+self.Width+(self.Border.Width*2) > parent.Width {
39 // self.Width = parent.Width
40 // self.Width -= (self.Margin.Right + self.Margin.Left)
41 // self.Width -= (self.Border.Width * 2)
42 // self.Height -= (self.Margin.Top + self.Margin.Bottom)
43 // }
44
45 (*state)[n.Properties.Id] = self
46 },
47 }
48}
1package cstyle
2
3import (
4 "fmt"
5 "gui/color"
6 "gui/element"
7 "gui/font"
8 "gui/parser"
9 "gui/utils"
10 "os"
11 "slices"
12 "sort"
13 "strconv"
14 "strings"
15)
16
17// !TODO: Make a fine selector to target tags and if it has children or not etc
18// + could copy the transformers but idk
19type Plugin struct {
20 Selector func(*element.Node) bool
21 Level int
22 Handler func(*element.Node, *map[string]element.State)
23}
24
25type Transformer struct {
26 Selector func(*element.Node) bool
27 Handler func(element.Node, *CSS) element.Node
28}
29
30type CSS struct {
31 Width float32
32 Height float32
33 StyleSheets []map[string]map[string]string
34 Plugins []Plugin
35 Transformers []Transformer
36 Document *element.Node
37}
38
39func (c *CSS) Transform(n element.Node) element.Node {
40 for _, v := range c.Transformers {
41 if v.Selector(&n) {
42 n = v.Handler(n, c)
43 }
44 }
45 for i := 0; i < len(n.Children); i++ {
46 v := n.Children[i]
47 tc := c.Transform(v)
48 n = *tc.Parent
49 n.Children[i] = tc
50 }
51
52 return n
53}
54
55func (c *CSS) StyleSheet(path string) {
56 // Parse the CSS file
57 dat, err := os.ReadFile(path)
58 utils.Check(err)
59 styles := parser.ParseCSS(string(dat))
60
61 c.StyleSheets = append(c.StyleSheets, styles)
62}
63
64func (c *CSS) StyleTag(css string) {
65 styles := parser.ParseCSS(css)
66 c.StyleSheets = append(c.StyleSheets, styles)
67}
68
69var inheritedProps = []string{
70 "color",
71 "cursor",
72 "font",
73 "font-family",
74 "font-size",
75 "font-style",
76 "font-weight",
77 "letter-spacing",
78 "line-height",
79 // "text-align",
80 "text-indent",
81 "text-justify",
82 "text-shadow",
83 "text-transform",
84 "text-decoration",
85 "visibility",
86 "word-spacing",
87 "display",
88}
89
90func (c *CSS) GetStyles(n element.Node) map[string]string {
91 styles := map[string]string{}
92
93 if n.Parent != nil {
94 ps := c.GetStyles(*n.Parent)
95 for _, v := range inheritedProps {
96 if ps[v] != "" {
97 styles[v] = ps[v]
98 }
99 }
100 }
101 for k, v := range n.Style {
102 styles[k] = v
103 }
104 hovered := false
105 if slices.Contains(n.ClassList.Classes, ":hover") {
106 hovered = true
107 }
108
109 for _, styleSheet := range c.StyleSheets {
110 for selector := range styleSheet {
111 // fmt.Println(selector, n.Properties.Id)
112 key := selector
113 if strings.Contains(selector, ":hover") && hovered {
114 selector = strings.Replace(selector, ":hover", "", -1)
115 }
116 if element.TestSelector(selector, &n) {
117 for k, v := range styleSheet[key] {
118 styles[k] = v
119 }
120 }
121
122 }
123 }
124
125 // This is different than node.Style
126 // temp1 = <span style=​"color:​#a6e22e">​CSS​</span>​
127 // temp1.style == CSSStyleDeclaration {0: 'color', accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
128 // temp1.getAttribute("style") == 'color:#a6e22e'
129 inline := parser.ParseStyleAttribute(n.GetAttribute("style") + ";")
130 styles = utils.Merge(styles, inline)
131 // add hover and focus css events
132
133 if n.Parent != nil {
134 if styles["z-index"] == "" && n.Parent.Style["z-index"] != "" {
135 z, _ := strconv.Atoi(n.Parent.Style["z-index"])
136 z += 1
137 styles["z-index"] = strconv.Itoa(z)
138 }
139 }
140
141 return styles
142}
143
144func (c *CSS) AddPlugin(plugin Plugin) {
145 c.Plugins = append(c.Plugins, plugin)
146}
147
148func (c *CSS) AddTransformer(transformer Transformer) {
149 c.Transformers = append(c.Transformers, transformer)
150}
151
152func CheckNode(n *element.Node, state *map[string]element.State) {
153 s := *state
154 self := s[n.Properties.Id]
155
156 fmt.Println(n.TagName, n.Properties.Id)
157 fmt.Printf("ID: %v\n", n.Id)
158 fmt.Printf("EM: %v\n", self.EM)
159 fmt.Printf("Parent: %v\n", n.Parent.TagName)
160 fmt.Printf("Classes: %v\n", n.ClassList.Classes)
161 fmt.Printf("Text: %v\n", n.InnerText)
162 fmt.Printf("X: %v, Y: %v, Z: %v\n", self.X, self.Y, self.Z)
163 fmt.Printf("Width: %v, Height: %v\n", self.Width, self.Height)
164 fmt.Printf("Styles: %v\n", n.Style)
165 // fmt.Printf("Background: %v\n", self.Background)
166 // fmt.Printf("Border: %v\n\n\n", self.Border)
167}
168
169func (c *CSS) ComputeNodeStyle(n *element.Node, state *map[string]element.State) *element.Node {
170
171 // Head is not renderable
172 if utils.IsParent(*n, "head") {
173 return n
174 }
175
176 plugins := c.Plugins
177
178 s := *state
179 self := s[n.Properties.Id]
180 parent := s[n.Parent.Properties.Id]
181
182 self.Background = color.Parse(n.Style, "background")
183 self.Border, _ = CompleteBorder(n.Style, self, parent)
184
185 fs, _ := utils.ConvertToPixels(n.Style["font-size"], parent.EM, parent.Width)
186 self.EM = fs
187
188 if n.Style["display"] == "none" {
189 self.X = 0
190 self.Y = 0
191 self.Width = 0
192 self.Height = 0
193 return n
194 }
195
196 if n.Style["width"] == "" && n.Style["display"] != "inline" {
197 n.Style["width"] = "100%"
198 }
199
200 // Set Z index value to be sorted in window
201 if n.Style["z-index"] != "" {
202 z, _ := strconv.Atoi(n.Style["z-index"])
203 self.Z = float32(z)
204 }
205
206 if parent.Z > 0 {
207 self.Z = parent.Z + 1
208 }
209
210 (*state)[n.Properties.Id] = self
211
212 wh := utils.GetWH(*n, state)
213 width := wh.Width
214 height := wh.Height
215
216 x, y := parent.X, parent.Y
217 // !NOTE: Would like to consolidate all XY function into this function like WH
218 offsetX, offsetY := utils.GetXY(n, state)
219 x += offsetX
220 y += offsetY
221
222 var top, left, right, bottom bool = false, false, false, false
223
224 m := utils.GetMP(*n, wh, state, "margin")
225 p := utils.GetMP(*n, wh, state, "padding")
226
227 self.Margin = m
228 self.Padding = p
229
230 if n.Style["position"] == "absolute" {
231 bas := utils.GetPositionOffsetNode(n)
232 base := s[bas.Properties.Id]
233 if n.Style["top"] != "" {
234 v, _ := utils.ConvertToPixels(n.Style["top"], self.EM, parent.Width)
235 y = v + base.Y
236 top = true
237 }
238 if n.Style["left"] != "" {
239 v, _ := utils.ConvertToPixels(n.Style["left"], self.EM, parent.Width)
240 x = v + base.X
241 left = true
242 }
243 if n.Style["right"] != "" {
244 v, _ := utils.ConvertToPixels(n.Style["right"], self.EM, parent.Width)
245 x = (base.Width - width) - v
246 right = true
247 }
248 if n.Style["bottom"] != "" {
249 v, _ := utils.ConvertToPixels(n.Style["bottom"], self.EM, parent.Width)
250 y = (base.Height - height) - v
251 bottom = true
252 }
253
254 } else {
255 for i, v := range n.Parent.Children {
256 if v.Style["position"] != "absolute" {
257 if v.Properties.Id == n.Properties.Id {
258 if i-1 > 0 {
259 sib := n.Parent.Children[i-1]
260 sibling := s[sib.Properties.Id]
261 if sib.Style["position"] != "absolute" {
262 if n.Style["display"] == "inline" {
263 if sib.Style["display"] == "inline" {
264 y = sibling.Y
265 } else {
266 y = sibling.Y + sibling.Height
267 }
268 } else {
269 y = sibling.Y + sibling.Height + (sibling.Border.Width * 2) + sibling.Margin.Bottom
270 }
271 }
272
273 }
274 break
275 } else if n.Style["display"] != "inline" {
276 vState := s[v.Properties.Id]
277 y += vState.Margin.Top + vState.Margin.Bottom + vState.Padding.Top + vState.Padding.Bottom + vState.Height + (self.Border.Width)
278 }
279 }
280 }
281 }
282
283 // Display modes need to be calculated here
284
285 relPos := !top && !left && !right && !bottom
286
287 if left || relPos {
288 x += m.Left
289 }
290 if top || relPos {
291 y += m.Top
292 }
293 if right {
294 x -= m.Right
295 }
296 if bottom {
297 y -= m.Bottom
298 }
299
300 self.X = x
301 self.Y = y
302 self.Width = width
303 self.Height = height
304 (*state)[n.Properties.Id] = self
305
306 if !utils.ChildrenHaveText(n) && len(n.InnerText) > 0 {
307 // Confirm text exists
308 if len(strings.TrimSpace(n.InnerText)) > 0 {
309 n.InnerText = strings.TrimSpace(n.InnerText)
310 self = genTextNode(n, state)
311 }
312 }
313
314 (*state)[n.Properties.Id] = self
315 (*state)[n.Parent.Properties.Id] = parent
316
317 // Call children here
318
319 var childYOffset float32
320 for i := 0; i < len(n.Children); i++ {
321 v := n.Children[i]
322 v.Parent = n
323 // This is were the tainting comes from
324 n.Children[i] = *c.ComputeNodeStyle(&v, state)
325
326 cState := (*state)[n.Children[i].Properties.Id]
327 if n.Style["height"] == "" {
328 if v.Style["position"] != "absolute" && cState.Y+cState.Height > childYOffset {
329 childYOffset = cState.Y + cState.Height
330 self.Height = (cState.Y - self.Border.Width) - (self.Y) + cState.Height
331 self.Height += cState.Margin.Top
332 self.Height += cState.Margin.Bottom
333 self.Height += cState.Padding.Top
334 self.Height += cState.Padding.Bottom
335 }
336 }
337 if cState.Width > self.Width {
338 self.Width = cState.Width
339 }
340 }
341
342 self.Height += self.Padding.Bottom
343
344 (*state)[n.Properties.Id] = self
345
346 // Sorting the array by the Level field
347 sort.Slice(plugins, func(i, j int) bool {
348 return plugins[i].Level < plugins[j].Level
349 })
350
351 for _, v := range plugins {
352 if v.Selector(n) {
353 v.Handler(n, state)
354 }
355 }
356
357 CheckNode(n, state)
358
359 return n
360}
361
362func CompleteBorder(cssProperties map[string]string, self, parent element.State) (element.Border, error) {
363 // Split the shorthand into components
364 borderComponents := strings.Fields(cssProperties["border"])
365
366 // Ensure there are at least 1 component (width or style or color)
367 if len(borderComponents) >= 1 {
368 width := "0px" // Default width
369 style := "solid"
370 borderColor := "#000000" // Default color
371
372 // Extract style and color if available
373 if len(borderComponents) >= 1 {
374 width = borderComponents[0]
375 }
376
377 // Extract style and color if available
378 if len(borderComponents) >= 2 {
379 style = borderComponents[1]
380 }
381 if len(borderComponents) >= 3 {
382 borderColor = borderComponents[2]
383 }
384
385 parsedColor, _ := color.Color(borderColor)
386
387 w, _ := utils.ConvertToPixels(width, self.EM, parent.Width)
388
389 return element.Border{
390 Width: w,
391 Style: style,
392 Color: parsedColor,
393 Radius: cssProperties["border-radius"],
394 }, nil
395 }
396
397 return element.Border{}, fmt.Errorf("invalid border shorthand format")
398}
399
400func genTextNode(n *element.Node, state *map[string]element.State) element.State {
401 s := *state
402 self := s[n.Properties.Id]
403 parent := s[n.Parent.Properties.Id]
404
405 text := element.Text{}
406
407 bold, italic := false, false
408
409 if n.Style["font-weight"] == "bold" {
410 bold = true
411 }
412
413 if n.Style["font-style"] == "italic" {
414 italic = true
415 }
416
417 if text.Font == nil {
418 f, _ := font.LoadFont(n.Style["font-family"], int(self.EM), bold, italic)
419 text.Font = f
420 }
421
422 letterSpacing, _ := utils.ConvertToPixels(n.Style["letter-spacing"], self.EM, parent.Width)
423 wordSpacing, _ := utils.ConvertToPixels(n.Style["word-spacing"], self.EM, parent.Width)
424 lineHeight, _ := utils.ConvertToPixels(n.Style["line-height"], self.EM, parent.Width)
425 if lineHeight == 0 {
426 lineHeight = self.EM + 3
427 }
428
429 text.LineHeight = int(lineHeight)
430 text.WordSpacing = int(wordSpacing)
431 text.LetterSpacing = int(letterSpacing)
432 wb := " "
433
434 if n.Style["word-wrap"] == "break-word" {
435 wb = ""
436 }
437
438 if n.Style["text-wrap"] == "wrap" || n.Style["text-wrap"] == "balance" {
439 wb = ""
440 }
441
442 var dt float32
443
444 if n.Style["text-decoration-thickness"] == "auto" || n.Style["text-decoration-thickness"] == "" {
445 dt = self.EM / 7
446 } else {
447 dt, _ = utils.ConvertToPixels(n.Style["text-decoration-thickness"], self.EM, parent.Width)
448 }
449
450 col := color.Parse(n.Style, "font")
451
452 self.Color = col
453
454 text.Color = col
455 text.DecorationColor = color.Parse(n.Style, "decoration")
456 text.Align = n.Style["text-align"]
457 text.WordBreak = wb
458 text.WordSpacing = int(wordSpacing)
459 text.LetterSpacing = int(letterSpacing)
460 text.WhiteSpace = n.Style["white-space"]
461 text.DecorationThickness = int(dt)
462 text.Overlined = n.Style["text-decoration"] == "overline"
463 text.Underlined = n.Style["text-decoration"] == "underline"
464 text.LineThrough = n.Style["text-decoration"] == "linethrough"
465 text.EM = int(self.EM)
466 text.Width = int(parent.Width)
467 text.Text = n.InnerText
468
469 if n.Style["word-spacing"] == "" {
470 text.WordSpacing = font.MeasureSpace(&text)
471 }
472
473 img, width := font.Render(&text)
474 self.Texture = img
475
476 if n.Style["height"] == "" {
477 self.Height = float32(text.LineHeight)
478 }
479
480 if n.Style["width"] == "" {
481 self.Width = float32(width)
482 }
483
484 return self
485}