Flexbox

Flexbox is a high level positioning plugin that allows for dynamic positioning of elements based apon container sizing. To learn more about flexbox refer to this MDN article, in this document we will go into the impleamentation of flexbox rather than the usage of it.

"display": "flex", "justify-content": "*", "align-content": "*", "align-items": "*", "flex-wrap": "*", "flex-direction": "*",

# Flex Properties

# order?(go)

asd

  1package flex
  2
  3import (
  4	"fmt"
  5	"gui/cstyle"
  6	"gui/element"
  7	"gui/utils"
  8	"slices"
  9	"strings"
 10)
 11
 12func Init() cstyle.Plugin {
 13	return cstyle.Plugin{
 14		Selector: func(n *element.Node) bool {
 15			styles := map[string]string{
 16				"display": "flex",
 17				// "justify-content": "*",
 18				// "align-content":   "*",
 19				// "align-items":     "*",
 20				// "flex-wrap":       "*",
 21				// "flex-direction":  "*",
 22			}
 23			matches := true
 24			for name, value := range styles {
 25				if n.Style[name] != value && !(value == "*") && n.Style[name] != "" {
 26					matches = false
 27				}
 28			}
 29			return matches
 30		},
 31		Level: 2,
 32		Handler: func(n *element.Node, state *map[string]element.State) {
 33			// !ISSUE: align-items is not impleamented
 34			// + issues with the width when notaspans are included
 35			s := *state
 36			self := s[n.Properties.Id]
 37			// Brief: justify does not align the bottom row correctly
 38			//        y axis also needs to be done
 39			verbs := strings.Split(n.Style["flex-direction"], "-")
 40
 41			orderedNode := order(*n, state, n.Children, verbs[0], len(verbs) > 1, n.Style["flex-wrap"] == "wrap")
 42			// fmt.Println(orderedNode)
 43			fmt.Println("######")
 44			for y := range orderedNode[0] {
 45				fmt.Print(y, " ")
 46			}
 47			fmt.Print("\n")
 48
 49			for x, row := range orderedNode {
 50				fmt.Print(x, " ")
 51				for _, col := range row {
 52					fmt.Print(col.Properties.Id, " ")
 53				}
 54				fmt.Print("\n")
 55			}
 56
 57			// c := s[n.Children[0].Properties.Id]
 58			// c.Width = 100
 59			// (*state)[n.Children[0].Properties.Id] = c
 60
 61			(*state)[n.Properties.Id] = self
 62		},
 63	}
 64}
 65
 66func order(p element.Node, state *map[string]element.State, elements []element.Node, direction string, reversed, wrap bool) [][]element.Node {
 67	// Get the state of the parent node
 68	s := *state
 69	self := s[p.Properties.Id]
 70
 71	// Variables for handling direction and margins
 72	var dir, marginStart, marginEnd string
 73	if direction == "column" {
 74		dir = "Height"
 75		marginStart = "Top"
 76		marginEnd = "Bottom"
 77	} else {
 78		dir = "Width"
 79		marginStart = "Left"
 80		marginEnd = "Right"
 81	}
 82
 83	// Get the maximum size in the specified direction
 84	max, _ := utils.GetStructField(&self, dir)
 85
 86	// Container for the ordered nodes
 87	nodes := [][]element.Node{}
 88
 89	if wrap {
 90		// If wrapping is enabled
 91		counter := 0
 92		if direction == "column" {
 93			// Collect nodes for column direction
 94			collector := []element.Node{}
 95			for _, v := range elements {
 96				vState := s[v.Properties.Id]
 97				elMax := vState.Height
 98				elMS, _ := utils.GetStructField(&vState.Margin, marginStart)
 99				elME, _ := utils.GetStructField(&vState.Margin, marginEnd)
100				tMax := elMax + elMS.(float32) + elME.(float32)
101
102				// Check if the current element can fit in the current row/column
103				if counter+int(tMax) < int(max.(float32)) {
104					collector = append(collector, v)
105				} else {
106					if reversed {
107						slices.Reverse(collector)
108					}
109					nodes = append(nodes, collector)
110					collector = []element.Node{}
111					collector = append(collector, v)
112					counter = 0
113				}
114				counter += int(tMax)
115			}
116			if len(collector) > 0 {
117				nodes = append(nodes, collector)
118			}
119		} else {
120			// Collect nodes for row direction
121			var mod int
122			for _, v := range elements {
123				vState := s[v.Properties.Id]
124				elMax := vState.Width
125				elMS, _ := utils.GetStructField(&vState.Margin, marginStart)
126				elME, _ := utils.GetStructField(&vState.Margin, marginEnd)
127				tMax := elMax + elMS.(float32) + elME.(float32)
128
129				// Check if the current element can fit in the current row/column
130				if counter+int(tMax) < int(max.(float32)) {
131					if len(nodes)-1 < mod {
132						nodes = append(nodes, []element.Node{v})
133					} else {
134						nodes[mod] = append(nodes[mod], v)
135					}
136				} else {
137					mod = 0
138					counter = 0
139					if len(nodes)-1 < mod {
140						nodes = append(nodes, []element.Node{v})
141					} else {
142						nodes[mod] = append(nodes[mod], v)
143					}
144				}
145				counter += int(tMax)
146				mod++
147			}
148			if reversed {
149				slices.Reverse(nodes)
150			}
151		}
152	} else {
153		// If wrapping is not enabled
154		var tMax float32
155		for _, v := range elements {
156			vState := s[v.Properties.Id]
157			elMax, _ := utils.GetStructField(&vState, dir)
158			elMS, _ := utils.GetStructField(&vState.Margin, marginStart)
159			elME, _ := utils.GetStructField(&vState.Margin, marginEnd)
160			tMax += elMax.(float32) + elMS.(float32) + elME.(float32)
161		}
162
163		pMax, _ := utils.GetStructField(&self, dir)
164
165		// Resize nodes to fit
166		var newSize float32
167		if tMax > pMax.(float32) {
168			newSize = pMax.(float32) / float32(len(elements))
169		}
170		if dir == "Width" {
171			for _, v := range elements {
172				vState := s[v.Properties.Id]
173				if newSize != 0 {
174					vState.Width = newSize
175				}
176				nodes = append(nodes, []element.Node{v})
177			}
178			if reversed {
179				slices.Reverse(nodes)
180			}
181		} else {
182			nodes = append(nodes, []element.Node{})
183			for _, v := range elements {
184				vState := s[v.Properties.Id]
185				if newSize != 0 {
186					vState.Height = newSize
187				}
188				nodes[0] = append(nodes[0], v)
189			}
190			if reversed {
191				slices.Reverse(nodes[0])
192			}
193		}
194	}
195
196	// Update the state of the parent node
197	(*state)[p.Properties.Id] = self
198
199	return nodes
200}