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