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	"gui/cstyle"
  5	"gui/cstyle/plugins/inline"
  6	"gui/element"
  7	"gui/utils"
  8	"sort"
  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			}
 18			matches := true
 19			for name, value := range styles {
 20				if (n.Style[name] != value || n.Style[name] == "") && !(value == "*") {
 21					matches = false
 22				}
 23			}
 24			return matches
 25		},
 26		Level: 3,
 27		Handler: func(n *element.Node, state *map[string]element.State) {
 28			s := *state
 29			self := s[n.Properties.Id]
 30
 31			verbs := strings.Split(n.Style["flex-direction"], "-")
 32			flexDirection := verbs[0]
 33			if flexDirection == "" {
 34				flexDirection = "row"
 35			}
 36			flexReversed := false
 37			if len(verbs) > 1 {
 38				flexReversed = true
 39			}
 40
 41			var flexWrapped bool
 42			if n.Style["flex-wrap"] == "wrap" {
 43				flexWrapped = true
 44			} else {
 45				flexWrapped = false
 46			}
 47
 48			alignContent := n.Style["align-content"]
 49			if alignContent == "" {
 50				alignContent = "normal"
 51			}
 52			alignItems := n.Style["align-items"]
 53			if alignItems == "" {
 54				alignItems = "normal"
 55			}
 56			justifyItems := n.Style["justify-items"]
 57			if justifyItems == "" {
 58				justifyItems = "normal"
 59			}
 60
 61			justifyContent := n.Style["justify-content"]
 62			if justifyContent == "" {
 63				justifyContent = "normal"
 64			}
 65			// fmt.Println(flexDirection, flexReversed, flexWrapped, hAlign, vAlign, justifyItems, justifyContent)
 66			rows := [][]int{}
 67			maxH := float32(0)
 68			// maxW := float32(0)
 69
 70			// Get inital sizing
 71			textTotal := 0
 72			textCounts := []int{}
 73			widths := []float32{}
 74			// heights := []float32{}
 75			innerSizes := [][]float32{}
 76			minWidths := []float32{}
 77			minHeights := []float32{}
 78			maxWidths := []float32{}
 79			maxHeights := []float32{}
 80			for _, v := range n.Children {
 81				count := countText(v)
 82				textTotal += count
 83				textCounts = append(textCounts, count)
 84
 85				minw := getMinWidth(&v, state)
 86				minWidths = append(minWidths, minw)
 87
 88				maxw := getMaxWidth(&v, state)
 89				maxWidths = append(maxWidths, maxw)
 90
 91				w, h := getInnerSize(&v, state)
 92
 93				minh := getMinHeight(&v, state)
 94				minHeights = append(minHeights, minh)
 95
 96				maxh := getMaxHeight(&v, state)
 97				maxHeights = append(maxHeights, maxh)
 98				innerSizes = append(innerSizes, []float32{w, h})
 99			}
100			selfWidth := (self.Width - self.Padding.Left) - self.Padding.Right
101			selfHeight := (self.Height - self.Padding.Top) - self.Padding.Bottom
102
103			if flexDirection == "row" {
104				// if the elements are less than the size of the parent, don't change widths. Just set mins
105				if !flexWrapped {
106					if add2d(innerSizes, 0) < selfWidth {
107						for i, v := range n.Children {
108							vState := s[v.Properties.Id]
109
110							w := innerSizes[i][0]
111							w -= vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
112							widths = append(widths, w)
113						}
114					} else {
115						// Modifiy the widths so they aren't under the mins
116						for i, v := range n.Children {
117							vState := s[v.Properties.Id]
118
119							w := ((selfWidth / float32(textTotal)) * float32(textCounts[i]))
120							w -= vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
121
122							if w < minWidths[i] {
123								selfWidth -= minWidths[i] + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
124								textTotal -= textCounts[i]
125								textCounts[i] = 0
126							}
127
128						}
129						for i, v := range n.Children {
130							vState := s[v.Properties.Id]
131
132							w := ((selfWidth / float32(textTotal)) * float32(textCounts[i]))
133							w -= vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
134							// (w!=w) is of NaN
135							if w < minWidths[i] || (w != w) {
136								w = minWidths[i]
137							}
138							widths = append(widths, w)
139						}
140					}
141					// Apply the new widths
142					fState := s[n.Children[0].Properties.Id]
143					for i, v := range n.Children {
144						vState := s[v.Properties.Id]
145
146						vState.Width = widths[i]
147						xStore := vState.X
148						if i > 0 {
149							sState := s[n.Children[i-1].Properties.Id]
150							vState.X = sState.X + sState.Width + sState.Margin.Right + vState.Margin.Left + sState.Border.Width + vState.Border.Width
151							propagateOffsets(&v, xStore, vState.Y, vState.X, fState.Y+vState.Margin.Top, state)
152						}
153
154						vState.Y = fState.Y + vState.Margin.Top
155
156						(*state)[v.Properties.Id] = vState
157						deInline(&v, state)
158						applyInline(&v, state)
159						applyBlock(&v, state)
160						_, h := getInnerSize(&v, state)
161						h = utils.Max(h, vState.Height)
162						maxH = utils.Max(maxH, h)
163					}
164					// When not wrapping everything will be on the same row
165					rows = append(rows, []int{0, len(n.Children), int(maxH)})
166				} else {
167					// Flex Wrapped
168					sum := innerSizes[0][0]
169					for i := 0; i < len(n.Children); i++ {
170						v := n.Children[i]
171						vState := s[v.Properties.Id]
172
173						// if the next plus current will break then
174						w := innerSizes[i][0]
175						if i > 0 {
176							sib := s[n.Children[i-1].Properties.Id]
177							if maxWidths[i] > selfWidth {
178								w = selfWidth - vState.Margin.Left - vState.Margin.Right - (vState.Border.Width * 2)
179							}
180							if w+sum > selfWidth {
181								sum = w + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
182							} else {
183								propagateOffsets(&v, vState.X, vState.Y, vState.X, sib.Y, state)
184								vState.Y = sib.Y
185								(*state)[v.Properties.Id] = vState
186								sum += w + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
187							}
188						}
189
190						widths = append(widths, w)
191					}
192
193					// Move the elements into the correct position
194					start := 0
195					var prevOffset float32
196					for i := 0; i < len(n.Children); i++ {
197						v := n.Children[i]
198						vState := s[v.Properties.Id]
199
200						vState.Width = widths[i]
201						xStore := vState.X
202						yStore := vState.Y
203
204						if i > 0 {
205							sib := s[n.Children[i-1].Properties.Id]
206							if vState.Y+prevOffset == sib.Y {
207								yStore += prevOffset
208
209								if vState.Height < sib.Height {
210									vState.Height = minHeight(v, state, sib.Height)
211								}
212								// Shift right if on a row with sibling
213								xStore = sib.X + sib.Width + sib.Margin.Right + sib.Border.Width + vState.Margin.Left + vState.Border.Width
214							} else {
215								// Shift under sibling
216								yStore = sib.Y + sib.Height + sib.Margin.Top + sib.Margin.Bottom + sib.Border.Width*2
217								prevOffset = yStore - vState.Y
218								rows = append(rows, []int{start, i, int(maxH)})
219								start = i
220								maxH = 0
221							}
222							propagateOffsets(&v, vState.X, vState.Y, xStore, yStore, state)
223						}
224						vState.X = xStore
225						vState.Y = yStore
226
227						(*state)[v.Properties.Id] = vState
228						deInline(&v, state)
229						applyInline(&v, state)
230						applyBlock(&v, state)
231						_, h := getInnerSize(&v, state)
232						h = utils.Max(h, vState.Height)
233						maxH = utils.Max(maxH, h)
234						vState.Height = minHeight(v, state, h)
235						(*state)[v.Properties.Id] = vState
236					}
237					if start < len(n.Children) {
238						rows = append(rows, []int{start, len(n.Children), int(maxH)})
239					}
240				}
241
242				for _, v := range rows {
243					for i := v[0]; i < v[1]; i++ {
244						vState := s[n.Children[i].Properties.Id]
245						height := float32(v[2])
246						if (n.Style["height"] != "" || n.Style["min-height"] != "") && !flexWrapped {
247							height = self.Height - self.Padding.Top - self.Padding.Bottom - vState.Margin.Top - vState.Margin.Bottom - (vState.Border.Width * 2)
248						}
249						vState.Height = minHeight(n.Children[i], state, height)
250						(*state)[n.Children[i].Properties.Id] = vState
251					}
252				}
253				// Reverse elements
254				if flexReversed {
255					rowReverse(rows, n, state)
256				}
257
258				if justifyContent != "" && justifyContent != "normal" {
259					justifyRow(rows, n, state, justifyContent, flexReversed)
260				}
261
262				alignRow(rows, n, state, alignItems, alignContent)
263
264			}
265
266			// Column doesn't really need a lot done bc it is basically block styling rn
267			if flexDirection == "column" {
268				if !flexWrapped {
269					// if the container has a size restriction
270					if n.Style["height"] != "" {
271						var totalHeight float32
272						var fixedHeightElements int
273						for _, v := range n.Children {
274							vState := s[v.Properties.Id]
275							if v.Style["min-height"] != "" {
276								selfHeight -= vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)
277								fixedHeightElements++
278							} else {
279								totalHeight += vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)
280							}
281						}
282
283						heightDelta := selfHeight - totalHeight
284						if heightDelta < 0 {
285							heightDelta = -heightDelta
286						}
287						heightAdj := heightDelta / float32(len(n.Children)-fixedHeightElements)
288						if heightAdj < 0 {
289							heightAdj = -heightAdj
290						}
291						// We are calculating the amount a element needs to shrink because of its siblings
292						for i, v := range n.Children {
293							vState := s[v.Properties.Id]
294							if v.Style["min-height"] == "" {
295								vState.Height -= heightAdj
296								if i > 0 {
297									vState.Y -= heightAdj * float32(i)
298								}
299								(*state)[v.Properties.Id] = vState
300							}
301						}
302
303					}
304					for i, v := range n.Children {
305						vState := s[v.Properties.Id]
306						rows = append(rows, []int{i, i + 1, int(vState.Height)})
307					}
308
309				} else {
310
311				}
312				if flexReversed {
313					colReverse(n, state)
314				}
315			}
316			if n.Style["height"] == "" || n.Style["min-height"] == "" {
317				_, h := getInnerSize(n, state)
318				// fmt.Println(h)
319				self.Height = h
320			}
321			(*state)[n.Properties.Id] = self
322		},
323	}
324}
325
326func applyBlock(n *element.Node, state *map[string]element.State) {
327	if len(n.Children) > 0 {
328		accum := float32(0)
329		inlineOffset := float32(0)
330		s := *state
331		lastHeight := float32(0)
332		baseY := s[n.Children[0].Properties.Id].Y
333		for i := 0; i < len(n.Children); i++ {
334			v := &n.Children[i]
335			vState := s[v.Properties.Id]
336
337			if v.Style["display"] != "block" {
338				vState.Y += inlineOffset
339				accum = (vState.Y - baseY)
340				lastHeight = vState.Height
341			} else if v.Style["position"] != "absolute" {
342				vState.Y += accum
343				inlineOffset += (vState.Height + (vState.Border.Width * 2) + vState.Margin.Top + vState.Margin.Bottom + vState.Padding.Top + vState.Padding.Bottom) + lastHeight
344			}
345			(*state)[v.Properties.Id] = vState
346		}
347	}
348}
349
350func deInline(n *element.Node, state *map[string]element.State) {
351	s := *state
352	// self := s[n.Properties.Id]
353	baseX := float32(-1)
354	baseY := float32(-1)
355	for _, v := range n.Children {
356		vState := s[v.Properties.Id]
357
358		if v.Style["display"] == "inline" {
359			if baseX < 0 && baseY < 0 {
360				baseX = vState.X
361				baseY = vState.Y
362			} else {
363				vState.X = baseX
364				vState.Y = baseY
365				(*state)[v.Properties.Id] = vState
366
367			}
368		} else {
369			baseX = float32(-1)
370			baseY = float32(-1)
371		}
372
373		if len(v.Children) > 0 {
374			deInline(&v, state)
375		}
376	}
377
378}
379
380func applyInline(n *element.Node, state *map[string]element.State) {
381	pl := inline.Init()
382	for i := 0; i < len(n.Children); i++ {
383		v := &n.Children[i]
384
385		if len(v.Children) > 0 {
386			applyInline(v, state)
387		}
388
389		if pl.Selector(v) {
390			pl.Handler(v, state)
391		}
392	}
393}
394
395func propagateOffsets(n *element.Node, prevx, prevy, newx, newy float32, state *map[string]element.State) {
396	s := *state
397	for _, v := range n.Children {
398		vState := s[v.Properties.Id]
399		xStore := (vState.X - prevx) + newx
400		yStore := (vState.Y - prevy) + newy
401
402		if len(v.Children) > 0 {
403			propagateOffsets(&v, vState.X, vState.Y, xStore, yStore, state)
404		}
405		vState.X = xStore
406		vState.Y = yStore
407		(*state)[v.Properties.Id] = vState
408	}
409
410}
411
412func countText(n element.Node) int {
413	count := 0
414	groups := []int{}
415	for _, v := range n.Children {
416		if v.TagName == "notaspan" {
417			count += 1
418		}
419		if v.Style["display"] == "block" {
420			groups = append(groups, count)
421			count = 0
422		}
423		if len(v.Children) > 0 {
424			count += countText(v)
425		}
426	}
427	groups = append(groups, count)
428
429	sort.Slice(groups, func(i, j int) bool {
430		return groups[i] > groups[j]
431	})
432	return groups[0]
433}
434
435func minHeight(n element.Node, state *map[string]element.State, prev float32) float32 {
436	s := *state
437	self := s[n.Properties.Id]
438	if n.Style["min-height"] != "" {
439		mw := utils.ConvertToPixels(n.Style["min-height"], self.EM, s[n.Parent.Properties.Id].Width)
440		return utils.Max(prev, mw)
441	} else {
442		return prev
443	}
444
445}
446
447func getMinHeight(n *element.Node, state *map[string]element.State) float32 {
448	s := *state
449	self := s[n.Properties.Id]
450	selfHeight := float32(0)
451
452	if len(n.Children) > 0 {
453		for _, v := range n.Children {
454			selfHeight = utils.Max(selfHeight, getNodeHeight(&v, state))
455		}
456	} else {
457		selfHeight = self.Height
458	}
459	if n.Style["min-height"] != "" {
460		mh := utils.ConvertToPixels(n.Style["min-height"], self.EM, s[n.Parent.Properties.Id].Width)
461		selfHeight = utils.Max(mh, selfHeight)
462	}
463
464	selfHeight += self.Padding.Top + self.Padding.Bottom
465	return selfHeight
466}
467
468func getMinWidth(n *element.Node, state *map[string]element.State) float32 {
469	s := *state
470	self := s[n.Properties.Id]
471	selfWidth := float32(0)
472
473	if len(n.Children) > 0 {
474		for _, v := range n.Children {
475			selfWidth = utils.Max(selfWidth, getNodeWidth(&v, state))
476		}
477	} else {
478		selfWidth = self.Width
479	}
480	if n.Style["min-width"] != "" {
481		mw := utils.ConvertToPixels(n.Style["min-width"], self.EM, s[n.Parent.Properties.Id].Width)
482		selfWidth = utils.Max(mw, selfWidth)
483	}
484
485	selfWidth += self.Padding.Left + self.Padding.Right
486	return selfWidth
487}
488func getMaxWidth(n *element.Node, state *map[string]element.State) float32 {
489	s := *state
490	self := s[n.Properties.Id]
491	selfWidth := float32(0)
492
493	if len(n.Children) > 0 {
494		var maxRowWidth, rowWidth float32
495
496		for _, v := range n.Children {
497			rowWidth += getNodeWidth(&v, state)
498			if v.Style["display"] != "inline" {
499				maxRowWidth = utils.Max(rowWidth, maxRowWidth)
500				rowWidth = 0
501			}
502		}
503		selfWidth = utils.Max(rowWidth, maxRowWidth)
504	} else {
505		selfWidth = self.Width
506	}
507
508	selfWidth += self.Padding.Left + self.Padding.Right
509	return selfWidth
510}
511
512func getNodeWidth(n *element.Node, state *map[string]element.State) float32 {
513	s := *state
514	self := s[n.Properties.Id]
515	w := float32(0)
516	w += self.Padding.Left
517	w += self.Padding.Right
518
519	w += self.Margin.Left
520	w += self.Margin.Right
521
522	w += self.Width
523
524	w += self.Border.Width * 2
525
526	for _, v := range n.Children {
527		w = utils.Max(w, getNodeWidth(&v, state))
528	}
529
530	return w
531}
532func getMaxHeight(n *element.Node, state *map[string]element.State) float32 {
533	s := *state
534	self := s[n.Properties.Id]
535	selfHeight := float32(0)
536
537	if len(n.Children) > 0 {
538		var maxRowHeight, rowHeight float32
539
540		for _, v := range n.Children {
541			rowHeight += getNodeHeight(&v, state)
542			if v.Style["display"] != "inline" {
543				maxRowHeight = utils.Max(rowHeight, maxRowHeight)
544				rowHeight = 0
545			}
546		}
547		selfHeight = utils.Max(rowHeight, maxRowHeight)
548	} else {
549		selfHeight = self.Height
550	}
551
552	selfHeight += self.Padding.Top + self.Padding.Bottom
553	return selfHeight
554}
555
556func getNodeHeight(n *element.Node, state *map[string]element.State) float32 {
557	s := *state
558	self := s[n.Properties.Id]
559	h := float32(0)
560	h += self.Padding.Top
561	h += self.Padding.Bottom
562
563	h += self.Margin.Top
564	h += self.Margin.Bottom
565
566	h += self.Height
567
568	h += self.Border.Width * 2
569
570	for _, v := range n.Children {
571		h = utils.Max(h, getNodeHeight(&v, state))
572	}
573
574	return h
575}
576
577func getInnerSize(n *element.Node, state *map[string]element.State) (float32, float32) {
578	s := *state
579	self := s[n.Properties.Id]
580
581	minx := float32(10e10)
582	maxw := float32(0)
583	miny := float32(10e10)
584	maxh := float32(0)
585	for _, v := range n.Children {
586		vState := s[v.Properties.Id]
587		minx = utils.Min(vState.X, minx)
588		miny = utils.Min(vState.Y-vState.Margin.Top, miny)
589		// Don't add the top or left because the x&y values already take that into account
590		hOffset := (vState.Border.Width * 2) + vState.Margin.Bottom
591		wOffset := (vState.Border.Width * 2) + vState.Margin.Right
592		maxw = utils.Max(vState.X+vState.Width+wOffset, maxw)
593		maxh = utils.Max(vState.Y+vState.Height+hOffset, maxh)
594	}
595	w := maxw - minx
596	h := maxh - miny
597
598	w += self.Padding.Left + self.Padding.Right
599	h += self.Padding.Top + self.Padding.Bottom
600	if n.Style["width"] != "" {
601		w = self.Width
602	}
603	if n.Style["height"] != "" {
604		h = self.Height
605	}
606
607	return w, h
608}
609
610func add2d(arr [][]float32, index int) float32 {
611	var sum float32
612	if len(arr) == 0 {
613		return sum
614	}
615
616	for i := 0; i < len(arr); i++ {
617		if len(arr[i]) <= index {
618			return sum
619		}
620		sum += arr[i][index]
621	}
622
623	return sum
624}
625
626func colReverse(n *element.Node, state *map[string]element.State) {
627	s := *state
628	tempNodes := []element.Node{}
629	tempStates := []element.State{}
630	for i := len(n.Children) - 1; i >= 0; i-- {
631		tempNodes = append(tempNodes, n.Children[i])
632		tempStates = append(tempStates, s[n.Children[i].Properties.Id])
633	}
634
635	for i := 0; i < len(tempStates); i++ {
636		vState := s[n.Children[i].Properties.Id]
637		propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, tempStates[i].Y, state)
638		vState.Y = tempStates[i].Y
639		(*state)[n.Children[i].Properties.Id] = vState
640	}
641
642	n.Children = tempNodes
643}
644
645func rowReverse(rows [][]int, n *element.Node, state *map[string]element.State) {
646	s := *state
647	for _, row := range rows {
648		tempNodes := []element.Node{}
649		tempStates := []element.State{}
650
651		for i := row[1] - 1; i >= row[0]; i-- {
652			tempNodes = append(tempNodes, n.Children[i])
653			tempStates = append(tempStates, s[n.Children[i].Properties.Id])
654		}
655
656		for i := 0; i < len(tempStates); i++ {
657			e := row[0] + i
658			vState := s[n.Children[e].Properties.Id]
659			propagateOffsets(&n.Children[e], vState.X, vState.Y, tempStates[i].X, tempStates[i].Y, state)
660			vState.X = tempStates[i].X
661			(*state)[n.Children[e].Properties.Id] = vState
662		}
663		for i := 0; i < len(tempStates); i++ {
664			e := row[0] + i
665			n.Children[e] = tempNodes[i]
666		}
667
668		for i := row[1] - 1; i >= row[0]; i-- {
669			vState := s[n.Children[i].Properties.Id]
670			var xChng float32
671			if i < row[1]-1 {
672				sib := s[n.Children[i+1].Properties.Id]
673				xChng = sib.X - (sib.Border.Width + sib.Margin.Left + vState.Margin.Right + vState.Border.Width + vState.Width)
674			} else {
675				parent := s[n.Properties.Id]
676				xChng = ((((parent.X + parent.Width) - parent.Padding.Right) - vState.Width) - vState.Margin.Right) - (vState.Border.Width)
677
678			}
679			propagateOffsets(&n.Children[i], vState.X, vState.Y, xChng, vState.Y, state)
680			vState.X = xChng
681			(*state)[n.Children[i].Properties.Id] = vState
682		}
683	}
684}
685
686func justifyRow(rows [][]int, n *element.Node, state *map[string]element.State, justify string, reversed bool) {
687	s := *state
688	for _, row := range rows {
689
690		if (justify == "flex-end" || justify == "end" || justify == "right") && !reversed {
691			for i := row[1] - 1; i >= row[0]; i-- {
692				vState := s[n.Children[i].Properties.Id]
693				var xChng float32
694				if i < row[1]-1 {
695					sib := s[n.Children[i+1].Properties.Id]
696					xChng = sib.X - (sib.Border.Width + sib.Margin.Left + vState.Margin.Right + vState.Border.Width + vState.Width)
697				} else {
698					parent := s[n.Properties.Id]
699					xChng = ((((parent.X + parent.Width) - parent.Padding.Right) - vState.Width) - vState.Margin.Right) - (vState.Border.Width)
700
701				}
702				propagateOffsets(&n.Children[i], vState.X, vState.Y, xChng, vState.Y, state)
703				vState.X = xChng
704				(*state)[n.Children[i].Properties.Id] = vState
705			}
706		} else if (justify == "flex-end" || justify == "start" || justify == "left" || justify == "normal") && reversed {
707			for i := row[0]; i < row[1]; i++ {
708				vState := s[n.Children[i].Properties.Id]
709				var xChng float32
710				if i > row[0] {
711					sib := s[n.Children[i-1].Properties.Id]
712					xChng = sib.X + sib.Width + (sib.Border.Width * 2) + sib.Margin.Right + vState.Margin.Left + vState.Border.Width
713				} else {
714					parent := s[n.Properties.Id]
715					xChng = parent.X + parent.Padding.Right + vState.Margin.Left + vState.Border.Width + parent.Border.Width
716
717				}
718				propagateOffsets(&n.Children[i], vState.X, vState.Y, xChng, vState.Y, state)
719				vState.X = xChng
720				(*state)[n.Children[i].Properties.Id] = vState
721			}
722		} else if justify == "center" {
723			// get width of row then center (by getting last x + w + mr + b)
724			f := s[n.Children[row[0]].Properties.Id]
725			l := s[n.Children[row[1]-1].Properties.Id]
726			parent := s[n.Properties.Id]
727			po := parent.X + parent.Border.Width
728			offset := (parent.Width - ((f.X - po) + (l.X - po) + l.Width + f.Border.Width + l.Border.Width)) / 2
729
730			for i := row[0]; i < row[1]; i++ {
731				vState := s[n.Children[i].Properties.Id]
732
733				if !reversed {
734					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X+offset, vState.Y, state)
735					vState.X += offset
736				} else {
737					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X-offset, vState.Y, state)
738					vState.X -= offset
739				}
740				(*state)[n.Children[i].Properties.Id] = vState
741			}
742
743		} else if justify == "space-between" {
744			// get width of row then center (by getting last x + w + mr + b)
745			f := s[n.Children[row[0]].Properties.Id]
746			l := s[n.Children[row[1]-1].Properties.Id]
747			parent := s[n.Properties.Id]
748			po := parent.Border.Width + parent.Width
749			po -= parent.Padding.Left + parent.Padding.Right
750
751			// make po repersent the total space between elements
752			for i := row[0]; i < row[1]; i++ {
753				vState := s[n.Children[i].Properties.Id]
754				po -= vState.Width + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
755			}
756
757			po /= float32(((row[1]) - row[0]) - 1)
758
759			if (row[1]-1)-row[0] > 0 {
760				for i := row[0]; i < row[1]; i++ {
761					vState := s[n.Children[i].Properties.Id]
762					var offset float32
763					if i == row[0] {
764						offset = parent.X + parent.Padding.Left + f.Margin.Left + f.Border.Width
765					} else if i == row[1]-1 {
766						offset = (parent.X + parent.Width) - (l.Margin.Right + l.Border.Width + l.Width + parent.Padding.Right)
767					} else {
768						if !reversed {
769							offset = vState.X + (po * float32(i-row[0]))
770						} else {
771							offset = vState.X - (po * float32(((row[1]-1)-row[0])-(i-row[0])))
772						}
773
774					}
775
776					propagateOffsets(&n.Children[i], vState.X, vState.Y, offset, vState.Y, state)
777					vState.X = offset
778					(*state)[n.Children[i].Properties.Id] = vState
779				}
780			}
781			//  else {
782
783			// this is/was causing issues, removed and it fixed its self
784
785			// if there is one element move left
786			// vState := s[n.Children[(row[1]-1)-row[0]].Properties.Id]
787			// var offset float32
788
789			// if !reversed {
790			// 	offset = parent.X + parent.Padding.Left + f.Margin.Left + f.Border.Width
791			// 	propagateOffsets(&n.Children[(row[1]-1)-row[0]], vState.X, vState.Y, offset, vState.Y, state)
792			// 	vState.X = offset
793
794			// 	(*state)[n.Children[(row[1]-1)-row[0]].Properties.Id] = vState
795			// }
796
797			// }
798
799		} else if justify == "space-evenly" {
800			// get width of row then center (by getting last x + w + mr + b)
801			parent := s[n.Properties.Id]
802			po := parent.Border.Width + parent.Width
803			po -= parent.Padding.Left + parent.Padding.Right
804
805			// make po repersent the total space between elements
806			for i := row[0]; i < row[1]; i++ {
807				vState := s[n.Children[i].Properties.Id]
808				po -= vState.Width + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
809			}
810
811			po /= float32(((row[1]) - row[0]) + 1)
812
813			// get width of row then center (by getting last x + w + mr + b)
814
815			for i := row[0]; i < row[1]; i++ {
816				vState := s[n.Children[i].Properties.Id]
817
818				if !reversed {
819					offset := po * (float32(i-row[0]) + 1)
820					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X+offset, vState.Y, state)
821					vState.X += offset
822				} else {
823					offset := po * float32(((row[1]-1)-row[0])-((i-row[0])-1))
824
825					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X-offset, vState.Y, state)
826					vState.X -= offset
827				}
828				(*state)[n.Children[i].Properties.Id] = vState
829			}
830
831		} else if justify == "space-around" {
832			// get width of row then center (by getting last x + w + mr + b)
833			parent := s[n.Properties.Id]
834			po := parent.Border.Width + parent.Width
835			po -= parent.Padding.Left + parent.Padding.Right
836
837			// make po repersent the total space between elements
838			for i := row[0]; i < row[1]; i++ {
839				vState := s[n.Children[i].Properties.Id]
840				po -= vState.Width + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
841			}
842
843			po /= float32(((row[1]) - row[0]))
844
845			// get width of row then center (by getting last x + w + mr + b)
846
847			for i := row[0]; i < row[1]; i++ {
848				vState := s[n.Children[i].Properties.Id]
849
850				if !reversed {
851					m := (float32(i-row[0]) + 1)
852					if i-row[0] == 0 {
853						m = 0.5
854					} else {
855						m -= 0.5
856					}
857					offset := po * m
858					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X+offset, vState.Y, state)
859					vState.X += offset
860				} else {
861					m := float32(((row[1] - 1) - row[0]) - ((i - row[0]) - 1))
862					m -= 0.5
863					offset := po * m
864
865					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X-offset, vState.Y, state)
866					vState.X -= offset
867				}
868				(*state)[n.Children[i].Properties.Id] = vState
869			}
870
871		}
872
873	}
874}
875
876func alignRow(rows [][]int, n *element.Node, state *map[string]element.State, align, content string) {
877	// !ISSUE: Baseline isn't properly impleamented
878
879	s := *state
880	self := s[n.Properties.Id]
881
882	maxes := []float32{}
883	var maxesTotal float32
884	for _, row := range rows {
885		var maxH float32
886		for i := row[0]; i < row[1]; i++ {
887			vState := s[n.Children[i].Properties.Id]
888			_, h := getInnerSize(&n.Children[i], state)
889			h = minHeight(n.Children[i], state, h)
890			vState.Height = h
891			h += vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)
892			maxH = utils.Max(maxH, h)
893			(*state)[n.Children[i].Properties.Id] = vState
894		}
895		maxes = append(maxes, maxH)
896		maxesTotal += maxH
897	}
898
899	os := ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / float32(len(rows))
900	if os < 0 || content != "normal" {
901		os = 0
902	}
903
904	var contentOffset float32
905
906	if content == "center" {
907		contentOffset = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / 2
908	} else if content == "end" || content == "flex-end" {
909		contentOffset = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal)
910	} else if content == "start" || content == "flex-start" || content == "baseline" {
911		// This is redundent but it helps keep track
912		contentOffset = 0
913	} else if content == "space-between" {
914		os = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / float32(len(rows)-1)
915	} else if content == "space-around" {
916		os = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / float32(len(rows))
917		contentOffset = os / 2
918	} else if content == "space-evenly" {
919		os = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / float32(len(rows)+1)
920		contentOffset = os
921	}
922
923	for c, row := range rows {
924		maxH := maxes[c]
925		var sum float32
926		for i := 0; i < c; i++ {
927			sum += maxes[i]
928		}
929		if align == "start" || align == "flex-start" || align == "self-start" || align == "normal" {
930			for i := row[0]; i < row[1]; i++ {
931				vState := s[n.Children[i].Properties.Id]
932
933				offset := sum + self.Y + self.Padding.Top + vState.Margin.Top + contentOffset
934
935				if n.Style["height"] != "" || n.Style["min-height"] != "" {
936					offset += ((os) * float32(c))
937				}
938
939				propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, offset, state)
940				vState.Y = offset
941				(*state)[n.Children[i].Properties.Id] = vState
942			}
943		} else if align == "center" {
944			for i := row[0]; i < row[1]; i++ {
945				vState := s[n.Children[i].Properties.Id]
946
947				offset := sum + self.Y + self.Padding.Top + vState.Margin.Top + contentOffset
948
949				if n.Style["height"] != "" || n.Style["min-height"] != "" {
950					offset += (os * float32(c+1)) - (os / 2)
951				}
952
953				if vState.Height+vState.Margin.Top+vState.Margin.Bottom+(vState.Border.Width*2) < maxH {
954					offset += (maxH - (vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2))) / 2
955				}
956				propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, offset, state)
957				vState.Y = offset
958				(*state)[n.Children[i].Properties.Id] = vState
959			}
960		} else if align == "end" || align == "flex-end" || align == "self-end" {
961			for i := row[0]; i < row[1]; i++ {
962				vState := s[n.Children[i].Properties.Id]
963
964				offset := sum + self.Y + self.Padding.Top + vState.Margin.Top + contentOffset
965
966				if n.Style["height"] != "" || n.Style["min-height"] != "" {
967					offset += os * float32(c+1)
968				}
969
970				if vState.Height+vState.Margin.Top+vState.Margin.Bottom+(vState.Border.Width*2) < maxH {
971					offset += (maxH - (vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)))
972				}
973				propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, offset, state)
974				vState.Y = offset
975				(*state)[n.Children[i].Properties.Id] = vState
976
977			}
978		} else if align == "stretch" {
979			for i := row[0]; i < row[1]; i++ {
980				vState := s[n.Children[i].Properties.Id]
981
982				offset := sum + self.Y + self.Padding.Top + vState.Margin.Top
983
984				if n.Style["height"] != "" || n.Style["min-height"] != "" {
985					offset += ((os) * float32(c))
986				}
987
988				propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, offset, state)
989				vState.Y = offset
990				vState.Height = maxH - (vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2))
991				(*state)[n.Children[i].Properties.Id] = vState
992
993			}
994		}
995	}
996}