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					var totalHeight, maxH float32
 271					var fixedHeightElements int
 272					for i, v := range n.Children {
 273						vState := s[v.Properties.Id]
 274						if v.Style["min-height"] != "" {
 275							selfHeight -= vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)
 276							fixedHeightElements++
 277							maxH = utils.Max(maxH, vState.Height)
 278						} else {
 279							// accoutn for element min height
 280							totalHeight += minHeights[i] + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)
 281							maxH = utils.Max(maxH, minHeights[i])
 282						}
 283					}
 284
 285					heightDelta := selfHeight - totalHeight
 286					if heightDelta < 0 {
 287						heightDelta = -heightDelta
 288					}
 289					heightAdj := heightDelta / float32(len(n.Children)-fixedHeightElements)
 290					if heightAdj < 0 {
 291						heightAdj = -heightAdj
 292					}
 293					// We are calculating the amount a element needs to shrink because of its siblings
 294					for i, v := range n.Children {
 295						vState := s[v.Properties.Id]
 296						yStore := vState.Y
 297						if v.Style["min-height"] == "" {
 298							vState.Height = minHeights[i] - heightAdj
 299							if vState.Height < minHeights[i] {
 300								vState.Height = minHeights[i]
 301							}
 302
 303						}
 304						if i > 0 {
 305							sib := s[n.Children[i-1].Properties.Id]
 306
 307							vState.Y = sib.Y + sib.Height + sib.Margin.Bottom + sib.Border.Width + vState.Margin.Top + vState.Border.Width
 308						}
 309						propagateOffsets(&v, vState.X, yStore, vState.X, vState.Y, state)
 310
 311						(*state)[v.Properties.Id] = vState
 312					}
 313
 314					rows = append(rows, []int{0, len(n.Children) - 1, int(maxH)})
 315
 316				} else {
 317					var colHeight float32
 318					var colIndex int
 319					cols := [][][]float32{}
 320
 321					// Map elements to columns
 322					for i, v := range n.Children {
 323						vState := s[v.Properties.Id]
 324
 325						height := vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)
 326						if colHeight+height > selfHeight {
 327							colHeight = height
 328							colIndex++
 329							width := vState.Width + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
 330							if colIndex >= len(cols) {
 331								cols = append(cols, [][]float32{})
 332							}
 333							cols[colIndex] = append(cols[colIndex], []float32{float32(i), height, width})
 334						} else {
 335							colHeight += height
 336							width := vState.Width + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
 337							if colIndex >= len(cols) {
 338								cols = append(cols, [][]float32{})
 339							}
 340							cols[colIndex] = append(cols[colIndex], []float32{float32(i), height, width})
 341						}
 342					}
 343
 344					// Find the max total width of all columns
 345					var totalMaxWidth float32
 346					maxWidths := []float32{}
 347					for _, col := range cols {
 348						var maxWidth, maxHeight float32
 349						for _, element := range col {
 350							maxHeight = utils.Max(element[1], maxHeight)
 351							maxWidth = utils.Max(element[2], maxWidth)
 352						}
 353						rows = append(rows, []int{int(col[0][0]), int(col[len(col)-1][0]), int(maxHeight)})
 354						totalMaxWidth += maxWidth
 355						maxWidths = append(maxWidths, maxWidth)
 356					}
 357					offset := (selfWidth - totalMaxWidth) / float32(len(cols))
 358					// Move the elements into the correct position
 359					var xOffset float32
 360					for i, col := range cols {
 361						// Move the elements into the correct position
 362						yOffset := self.Y + self.Border.Width + self.Padding.Top
 363						for _, element := range col {
 364							vState := s[n.Children[int(element[0])].Properties.Id]
 365							xStore := vState.X
 366							yStore := vState.Y
 367							vState.X = self.X + self.Padding.Left + self.Border.Width + xOffset + vState.Margin.Left + vState.Border.Width
 368							vState.Y = yOffset + vState.Margin.Top + vState.Border.Width
 369							propagateOffsets(&n.Children[int(element[0])], xStore, yStore, vState.X, vState.Y, state)
 370
 371							yOffset += vState.Margin.Top + vState.Border.Width + vState.Height + vState.Margin.Bottom + vState.Border.Width
 372							(*state)[n.Children[int(element[0])].Properties.Id] = vState
 373						}
 374						xOffset += maxWidths[i] + offset
 375					}
 376
 377				}
 378
 379				if flexReversed {
 380					colReverse(rows, n, state)
 381				}
 382
 383				justifyCols(rows, n, state, justifyContent, flexReversed)
 384			}
 385			if n.Style["height"] == "" || n.Style["min-height"] == "" {
 386				_, h := getInnerSize(n, state)
 387				// fmt.Println(h)
 388				self.Height = h
 389			}
 390			(*state)[n.Properties.Id] = self
 391		},
 392	}
 393}
 394
 395func applyBlock(n *element.Node, state *map[string]element.State) {
 396	if len(n.Children) > 0 {
 397		accum := float32(0)
 398		inlineOffset := float32(0)
 399		s := *state
 400		lastHeight := float32(0)
 401		baseY := s[n.Children[0].Properties.Id].Y
 402		for i := 0; i < len(n.Children); i++ {
 403			v := &n.Children[i]
 404			vState := s[v.Properties.Id]
 405
 406			if v.Style["display"] != "block" {
 407				vState.Y += inlineOffset
 408				accum = (vState.Y - baseY)
 409				lastHeight = vState.Height
 410			} else if v.Style["position"] != "absolute" {
 411				vState.Y += accum
 412				inlineOffset += (vState.Height + (vState.Border.Width * 2) + vState.Margin.Top + vState.Margin.Bottom + vState.Padding.Top + vState.Padding.Bottom) + lastHeight
 413			}
 414			(*state)[v.Properties.Id] = vState
 415		}
 416	}
 417}
 418
 419func deInline(n *element.Node, state *map[string]element.State) {
 420	s := *state
 421	// self := s[n.Properties.Id]
 422	baseX := float32(-1)
 423	baseY := float32(-1)
 424	for _, v := range n.Children {
 425		vState := s[v.Properties.Id]
 426
 427		if v.Style["display"] == "inline" {
 428			if baseX < 0 && baseY < 0 {
 429				baseX = vState.X
 430				baseY = vState.Y
 431			} else {
 432				vState.X = baseX
 433				vState.Y = baseY
 434				(*state)[v.Properties.Id] = vState
 435
 436			}
 437		} else {
 438			baseX = float32(-1)
 439			baseY = float32(-1)
 440		}
 441
 442		if len(v.Children) > 0 {
 443			deInline(&v, state)
 444		}
 445	}
 446
 447}
 448
 449func applyInline(n *element.Node, state *map[string]element.State) {
 450	pl := inline.Init()
 451	for i := 0; i < len(n.Children); i++ {
 452		v := &n.Children[i]
 453
 454		if len(v.Children) > 0 {
 455			applyInline(v, state)
 456		}
 457
 458		if pl.Selector(v) {
 459			pl.Handler(v, state)
 460		}
 461	}
 462}
 463
 464func propagateOffsets(n *element.Node, prevx, prevy, newx, newy float32, state *map[string]element.State) {
 465	s := *state
 466	for _, v := range n.Children {
 467		vState := s[v.Properties.Id]
 468		xStore := (vState.X - prevx) + newx
 469		yStore := (vState.Y - prevy) + newy
 470
 471		if len(v.Children) > 0 {
 472			propagateOffsets(&v, vState.X, vState.Y, xStore, yStore, state)
 473		}
 474		vState.X = xStore
 475		vState.Y = yStore
 476		(*state)[v.Properties.Id] = vState
 477	}
 478
 479}
 480
 481func countText(n element.Node) int {
 482	count := 0
 483	groups := []int{}
 484	for _, v := range n.Children {
 485		if v.TagName == "notaspan" {
 486			count += 1
 487		}
 488		if v.Style["display"] == "block" {
 489			groups = append(groups, count)
 490			count = 0
 491		}
 492		if len(v.Children) > 0 {
 493			count += countText(v)
 494		}
 495	}
 496	groups = append(groups, count)
 497
 498	sort.Slice(groups, func(i, j int) bool {
 499		return groups[i] > groups[j]
 500	})
 501	return groups[0]
 502}
 503
 504func minHeight(n element.Node, state *map[string]element.State, prev float32) float32 {
 505	s := *state
 506	self := s[n.Properties.Id]
 507	if n.Style["min-height"] != "" {
 508		mw := utils.ConvertToPixels(n.Style["min-height"], self.EM, s[n.Parent.Properties.Id].Width)
 509		return utils.Max(prev, mw)
 510	} else {
 511		return prev
 512	}
 513
 514}
 515
 516func getMinHeight(n *element.Node, state *map[string]element.State) float32 {
 517	s := *state
 518	self := s[n.Properties.Id]
 519	selfHeight := float32(0)
 520
 521	if len(n.Children) > 0 {
 522		for _, v := range n.Children {
 523			selfHeight = utils.Max(selfHeight, getNodeHeight(&v, state))
 524		}
 525	} else {
 526		selfHeight = self.Height
 527	}
 528	if n.Style["min-height"] != "" {
 529		mh := utils.ConvertToPixels(n.Style["min-height"], self.EM, s[n.Parent.Properties.Id].Width)
 530		selfHeight = utils.Max(mh, selfHeight)
 531	}
 532
 533	selfHeight += self.Padding.Top + self.Padding.Bottom
 534	return selfHeight
 535}
 536
 537func getMinWidth(n *element.Node, state *map[string]element.State) float32 {
 538	s := *state
 539	self := s[n.Properties.Id]
 540	selfWidth := float32(0)
 541
 542	if len(n.Children) > 0 {
 543		for _, v := range n.Children {
 544			selfWidth = utils.Max(selfWidth, getNodeWidth(&v, state))
 545		}
 546	} else {
 547		selfWidth = self.Width
 548	}
 549	if n.Style["min-width"] != "" {
 550		mw := utils.ConvertToPixels(n.Style["min-width"], self.EM, s[n.Parent.Properties.Id].Width)
 551		selfWidth = utils.Max(mw, selfWidth)
 552	}
 553
 554	selfWidth += self.Padding.Left + self.Padding.Right
 555	return selfWidth
 556}
 557func getMaxWidth(n *element.Node, state *map[string]element.State) float32 {
 558	s := *state
 559	self := s[n.Properties.Id]
 560	selfWidth := float32(0)
 561
 562	if len(n.Children) > 0 {
 563		var maxRowWidth, rowWidth float32
 564
 565		for _, v := range n.Children {
 566			rowWidth += getNodeWidth(&v, state)
 567			if v.Style["display"] != "inline" {
 568				maxRowWidth = utils.Max(rowWidth, maxRowWidth)
 569				rowWidth = 0
 570			}
 571		}
 572		selfWidth = utils.Max(rowWidth, maxRowWidth)
 573	} else {
 574		selfWidth = self.Width
 575	}
 576
 577	selfWidth += self.Padding.Left + self.Padding.Right
 578	return selfWidth
 579}
 580
 581func getNodeWidth(n *element.Node, state *map[string]element.State) float32 {
 582	s := *state
 583	self := s[n.Properties.Id]
 584	w := float32(0)
 585	w += self.Padding.Left
 586	w += self.Padding.Right
 587
 588	w += self.Margin.Left
 589	w += self.Margin.Right
 590
 591	w += self.Width
 592
 593	w += self.Border.Width * 2
 594
 595	for _, v := range n.Children {
 596		w = utils.Max(w, getNodeWidth(&v, state))
 597	}
 598
 599	return w
 600}
 601func getMaxHeight(n *element.Node, state *map[string]element.State) float32 {
 602	s := *state
 603	self := s[n.Properties.Id]
 604	selfHeight := float32(0)
 605
 606	if len(n.Children) > 0 {
 607		var maxRowHeight, rowHeight float32
 608
 609		for _, v := range n.Children {
 610			rowHeight += getNodeHeight(&v, state)
 611			if v.Style["display"] != "inline" {
 612				maxRowHeight = utils.Max(rowHeight, maxRowHeight)
 613				rowHeight = 0
 614			}
 615		}
 616		selfHeight = utils.Max(rowHeight, maxRowHeight)
 617	} else {
 618		selfHeight = self.Height
 619	}
 620
 621	selfHeight += self.Padding.Top + self.Padding.Bottom
 622	return selfHeight
 623}
 624
 625func getNodeHeight(n *element.Node, state *map[string]element.State) float32 {
 626	s := *state
 627	self := s[n.Properties.Id]
 628	h := float32(0)
 629	h += self.Padding.Top
 630	h += self.Padding.Bottom
 631
 632	h += self.Margin.Top
 633	h += self.Margin.Bottom
 634
 635	h += self.Height
 636
 637	h += self.Border.Width * 2
 638
 639	for _, v := range n.Children {
 640		h = utils.Max(h, getNodeHeight(&v, state))
 641	}
 642
 643	return h
 644}
 645
 646func getInnerSize(n *element.Node, state *map[string]element.State) (float32, float32) {
 647	s := *state
 648	self := s[n.Properties.Id]
 649
 650	minx := float32(10e10)
 651	maxw := float32(0)
 652	miny := float32(10e10)
 653	maxh := float32(0)
 654	for _, v := range n.Children {
 655		vState := s[v.Properties.Id]
 656		minx = utils.Min(vState.X, minx)
 657		miny = utils.Min(vState.Y-vState.Margin.Top, miny)
 658		// Don't add the top or left because the x&y values already take that into account
 659		hOffset := (vState.Border.Width * 2) + vState.Margin.Bottom
 660		wOffset := (vState.Border.Width * 2) + vState.Margin.Right
 661		maxw = utils.Max(vState.X+vState.Width+wOffset, maxw)
 662		maxh = utils.Max(vState.Y+vState.Height+hOffset, maxh)
 663	}
 664	w := maxw - minx
 665	h := maxh - miny
 666
 667	w += self.Padding.Left + self.Padding.Right
 668	h += self.Padding.Top + self.Padding.Bottom
 669	if n.Style["width"] != "" {
 670		w = self.Width
 671	}
 672	if n.Style["height"] != "" {
 673		h = self.Height
 674	}
 675
 676	return w, h
 677}
 678
 679func add2d(arr [][]float32, index int) float32 {
 680	var sum float32
 681	if len(arr) == 0 {
 682		return sum
 683	}
 684
 685	for i := 0; i < len(arr); i++ {
 686		if len(arr[i]) <= index {
 687			return sum
 688		}
 689		sum += arr[i][index]
 690	}
 691
 692	return sum
 693}
 694
 695func colReverse(cols [][]int, n *element.Node, state *map[string]element.State) {
 696	s := *state
 697	for _, col := range cols {
 698		tempNodes := []element.Node{}
 699		tempStates := []element.State{}
 700
 701		for i := col[1]; i >= col[0]; i-- {
 702			tempNodes = append(tempNodes, n.Children[i])
 703			tempStates = append(tempStates, s[n.Children[i].Properties.Id])
 704		}
 705
 706		for i := 0; i < len(tempStates); i++ {
 707			e := col[0] + i
 708			vState := s[n.Children[e].Properties.Id]
 709			propagateOffsets(&n.Children[e], vState.X, vState.Y, tempStates[i].X, tempStates[i].Y, state)
 710			vState.Y = tempStates[i].Y
 711			(*state)[n.Children[e].Properties.Id] = vState
 712		}
 713		for i := 0; i < len(tempStates); i++ {
 714			e := col[0] + i
 715			n.Children[e] = tempNodes[i]
 716		}
 717
 718		for i := col[1]; i >= col[0]; i-- {
 719			vState := s[n.Children[i].Properties.Id]
 720			var yChng float32
 721			if i < col[1] {
 722				sib := s[n.Children[i+1].Properties.Id]
 723				yChng = sib.Y - (sib.Border.Width + sib.Margin.Top + vState.Margin.Bottom + vState.Border.Width + vState.Height)
 724			} else {
 725				parent := s[n.Properties.Id]
 726				yChng = ((((parent.Y + parent.Height) - parent.Padding.Bottom) - vState.Height) - vState.Margin.Bottom) - (vState.Border.Width)
 727			}
 728			propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, yChng, state)
 729			vState.Y = yChng
 730			(*state)[n.Children[i].Properties.Id] = vState
 731		}
 732	}
 733}
 734
 735func rowReverse(rows [][]int, n *element.Node, state *map[string]element.State) {
 736	s := *state
 737	for _, row := range rows {
 738		tempNodes := []element.Node{}
 739		tempStates := []element.State{}
 740
 741		for i := row[1] - 1; i >= row[0]; i-- {
 742			tempNodes = append(tempNodes, n.Children[i])
 743			tempStates = append(tempStates, s[n.Children[i].Properties.Id])
 744		}
 745
 746		for i := 0; i < len(tempStates); i++ {
 747			e := row[0] + i
 748			vState := s[n.Children[e].Properties.Id]
 749			propagateOffsets(&n.Children[e], vState.X, vState.Y, tempStates[i].X, tempStates[i].Y, state)
 750			vState.X = tempStates[i].X
 751			(*state)[n.Children[e].Properties.Id] = vState
 752		}
 753		for i := 0; i < len(tempStates); i++ {
 754			e := row[0] + i
 755			n.Children[e] = tempNodes[i]
 756		}
 757
 758		for i := row[1] - 1; i >= row[0]; i-- {
 759			vState := s[n.Children[i].Properties.Id]
 760			var xChng float32
 761			if i < row[1]-1 {
 762				sib := s[n.Children[i+1].Properties.Id]
 763				xChng = sib.X - (sib.Border.Width + sib.Margin.Left + vState.Margin.Right + vState.Border.Width + vState.Width)
 764			} else {
 765				parent := s[n.Properties.Id]
 766				xChng = ((((parent.X + parent.Width) - parent.Padding.Right) - vState.Width) - vState.Margin.Right) - (vState.Border.Width)
 767
 768			}
 769			propagateOffsets(&n.Children[i], vState.X, vState.Y, xChng, vState.Y, state)
 770			vState.X = xChng
 771			(*state)[n.Children[i].Properties.Id] = vState
 772		}
 773	}
 774}
 775
 776func justifyRow(rows [][]int, n *element.Node, state *map[string]element.State, justify string, reversed bool) {
 777	s := *state
 778	for _, row := range rows {
 779
 780		if (justify == "flex-end" || justify == "end" || justify == "right") && !reversed {
 781			for i := row[1] - 1; i >= row[0]; i-- {
 782				vState := s[n.Children[i].Properties.Id]
 783				var xChng float32
 784				if i < row[1]-1 {
 785					sib := s[n.Children[i+1].Properties.Id]
 786					xChng = sib.X - (sib.Border.Width + sib.Margin.Left + vState.Margin.Right + vState.Border.Width + vState.Width)
 787				} else {
 788					parent := s[n.Properties.Id]
 789					xChng = ((((parent.X + parent.Width) - parent.Padding.Right) - vState.Width) - vState.Margin.Right) - (vState.Border.Width)
 790
 791				}
 792				propagateOffsets(&n.Children[i], vState.X, vState.Y, xChng, vState.Y, state)
 793				vState.X = xChng
 794				(*state)[n.Children[i].Properties.Id] = vState
 795			}
 796		} else if (justify == "flex-end" || justify == "start" || justify == "left" || justify == "normal") && reversed {
 797			for i := row[0]; i < row[1]; i++ {
 798				vState := s[n.Children[i].Properties.Id]
 799				var xChng float32
 800				if i > row[0] {
 801					sib := s[n.Children[i-1].Properties.Id]
 802					xChng = sib.X + sib.Width + (sib.Border.Width * 2) + sib.Margin.Right + vState.Margin.Left + vState.Border.Width
 803				} else {
 804					parent := s[n.Properties.Id]
 805					xChng = parent.X + parent.Padding.Right + vState.Margin.Left + vState.Border.Width + parent.Border.Width
 806
 807				}
 808				propagateOffsets(&n.Children[i], vState.X, vState.Y, xChng, vState.Y, state)
 809				vState.X = xChng
 810				(*state)[n.Children[i].Properties.Id] = vState
 811			}
 812		} else if justify == "center" {
 813			// get width of row then center (by getting last x + w + mr + b)
 814			f := s[n.Children[row[0]].Properties.Id]
 815			l := s[n.Children[row[1]-1].Properties.Id]
 816			parent := s[n.Properties.Id]
 817			po := parent.X + parent.Border.Width
 818			offset := (parent.Width - ((f.X - po) + (l.X - po) + l.Width + f.Border.Width + l.Border.Width)) / 2
 819
 820			for i := row[0]; i < row[1]; i++ {
 821				vState := s[n.Children[i].Properties.Id]
 822
 823				if !reversed {
 824					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X+offset, vState.Y, state)
 825					vState.X += offset
 826				} else {
 827					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X-offset, vState.Y, state)
 828					vState.X -= offset
 829				}
 830				(*state)[n.Children[i].Properties.Id] = vState
 831			}
 832
 833		} else if justify == "space-between" {
 834			// get width of row then center (by getting last x + w + mr + b)
 835			f := s[n.Children[row[0]].Properties.Id]
 836			l := s[n.Children[row[1]-1].Properties.Id]
 837			parent := s[n.Properties.Id]
 838			po := parent.Border.Width + parent.Width
 839			po -= parent.Padding.Left + parent.Padding.Right
 840
 841			// make po repersent the total space between elements
 842			for i := row[0]; i < row[1]; i++ {
 843				vState := s[n.Children[i].Properties.Id]
 844				po -= vState.Width + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
 845			}
 846
 847			po /= float32(((row[1]) - row[0]) - 1)
 848
 849			if (row[1]-1)-row[0] > 0 {
 850				for i := row[0]; i < row[1]; i++ {
 851					vState := s[n.Children[i].Properties.Id]
 852					var offset float32
 853					if i == row[0] {
 854						offset = parent.X + parent.Padding.Left + f.Margin.Left + f.Border.Width
 855					} else if i == row[1]-1 {
 856						offset = (parent.X + parent.Width) - (l.Margin.Right + l.Border.Width + l.Width + parent.Padding.Right)
 857					} else {
 858						if !reversed {
 859							offset = vState.X + (po * float32(i-row[0]))
 860						} else {
 861							offset = vState.X - (po * float32(((row[1]-1)-row[0])-(i-row[0])))
 862						}
 863
 864					}
 865
 866					propagateOffsets(&n.Children[i], vState.X, vState.Y, offset, vState.Y, state)
 867					vState.X = offset
 868					(*state)[n.Children[i].Properties.Id] = vState
 869				}
 870			}
 871			//  else {
 872
 873			// this is/was causing issues, removed and it fixed its self
 874
 875			// if there is one element move left
 876			// vState := s[n.Children[(row[1]-1)-row[0]].Properties.Id]
 877			// var offset float32
 878
 879			// if !reversed {
 880			// 	offset = parent.X + parent.Padding.Left + f.Margin.Left + f.Border.Width
 881			// 	propagateOffsets(&n.Children[(row[1]-1)-row[0]], vState.X, vState.Y, offset, vState.Y, state)
 882			// 	vState.X = offset
 883
 884			// 	(*state)[n.Children[(row[1]-1)-row[0]].Properties.Id] = vState
 885			// }
 886
 887			// }
 888
 889		} else if justify == "space-evenly" {
 890			// get width of row then center (by getting last x + w + mr + b)
 891			parent := s[n.Properties.Id]
 892			po := parent.Border.Width + parent.Width
 893			po -= parent.Padding.Left + parent.Padding.Right
 894
 895			// make po repersent the total space between elements
 896			for i := row[0]; i < row[1]; i++ {
 897				vState := s[n.Children[i].Properties.Id]
 898				po -= vState.Width + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
 899			}
 900
 901			po /= float32(((row[1]) - row[0]) + 1)
 902
 903			// get width of row then center (by getting last x + w + mr + b)
 904
 905			for i := row[0]; i < row[1]; i++ {
 906				vState := s[n.Children[i].Properties.Id]
 907
 908				if !reversed {
 909					offset := po * (float32(i-row[0]) + 1)
 910					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X+offset, vState.Y, state)
 911					vState.X += offset
 912				} else {
 913					offset := po * float32(((row[1]-1)-row[0])-((i-row[0])-1))
 914
 915					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X-offset, vState.Y, state)
 916					vState.X -= offset
 917				}
 918				(*state)[n.Children[i].Properties.Id] = vState
 919			}
 920
 921		} else if justify == "space-around" {
 922			// get width of row then center (by getting last x + w + mr + b)
 923			parent := s[n.Properties.Id]
 924			po := parent.Border.Width + parent.Width
 925			po -= parent.Padding.Left + parent.Padding.Right
 926
 927			// make po repersent the total space between elements
 928			for i := row[0]; i < row[1]; i++ {
 929				vState := s[n.Children[i].Properties.Id]
 930				po -= vState.Width + vState.Margin.Left + vState.Margin.Right + (vState.Border.Width * 2)
 931			}
 932
 933			po /= float32(((row[1]) - row[0]))
 934
 935			// get width of row then center (by getting last x + w + mr + b)
 936
 937			for i := row[0]; i < row[1]; i++ {
 938				vState := s[n.Children[i].Properties.Id]
 939
 940				if !reversed {
 941					m := (float32(i-row[0]) + 1)
 942					if i-row[0] == 0 {
 943						m = 0.5
 944					} else {
 945						m -= 0.5
 946					}
 947					offset := po * m
 948					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X+offset, vState.Y, state)
 949					vState.X += offset
 950				} else {
 951					m := float32(((row[1] - 1) - row[0]) - ((i - row[0]) - 1))
 952					m -= 0.5
 953					offset := po * m
 954
 955					propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X-offset, vState.Y, state)
 956					vState.X -= offset
 957				}
 958				(*state)[n.Children[i].Properties.Id] = vState
 959			}
 960
 961		}
 962
 963	}
 964}
 965
 966func alignRow(rows [][]int, n *element.Node, state *map[string]element.State, align, content string) {
 967	// !ISSUE: Baseline isn't properly impleamented
 968
 969	s := *state
 970	self := s[n.Properties.Id]
 971
 972	maxes := []float32{}
 973	var maxesTotal float32
 974	for _, row := range rows {
 975		var maxH float32
 976		for i := row[0]; i < row[1]; i++ {
 977			vState := s[n.Children[i].Properties.Id]
 978			_, h := getInnerSize(&n.Children[i], state)
 979			h = minHeight(n.Children[i], state, h)
 980			vState.Height = h
 981			h += vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)
 982			maxH = utils.Max(maxH, h)
 983			(*state)[n.Children[i].Properties.Id] = vState
 984		}
 985		maxes = append(maxes, maxH)
 986		maxesTotal += maxH
 987	}
 988
 989	os := ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / float32(len(rows))
 990	if os < 0 || content != "normal" {
 991		os = 0
 992	}
 993
 994	var contentOffset float32
 995
 996	if content == "center" {
 997		contentOffset = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / 2
 998	} else if content == "end" || content == "flex-end" {
 999		contentOffset = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal)
1000	} else if content == "start" || content == "flex-start" || content == "baseline" {
1001		// This is redundent but it helps keep track
1002		contentOffset = 0
1003	} else if content == "space-between" {
1004		os = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / float32(len(rows)-1)
1005	} else if content == "space-around" {
1006		os = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / float32(len(rows))
1007		contentOffset = os / 2
1008	} else if content == "space-evenly" {
1009		os = ((self.Height - (self.Padding.Top + self.Padding.Bottom + (self.Border.Width * 2))) - maxesTotal) / float32(len(rows)+1)
1010		contentOffset = os
1011	}
1012
1013	for c, row := range rows {
1014		maxH := maxes[c]
1015		var sum float32
1016		for i := 0; i < c; i++ {
1017			sum += maxes[i]
1018		}
1019		if align == "start" || align == "flex-start" || align == "self-start" || align == "normal" {
1020			for i := row[0]; i < row[1]; i++ {
1021				vState := s[n.Children[i].Properties.Id]
1022
1023				offset := sum + self.Y + self.Padding.Top + vState.Margin.Top + contentOffset
1024
1025				if n.Style["height"] != "" || n.Style["min-height"] != "" {
1026					offset += ((os) * float32(c))
1027				}
1028
1029				propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, offset, state)
1030				vState.Y = offset
1031				(*state)[n.Children[i].Properties.Id] = vState
1032			}
1033		} else if align == "center" {
1034			for i := row[0]; i < row[1]; i++ {
1035				vState := s[n.Children[i].Properties.Id]
1036
1037				offset := sum + self.Y + self.Padding.Top + vState.Margin.Top + contentOffset
1038
1039				if n.Style["height"] != "" || n.Style["min-height"] != "" {
1040					offset += (os * float32(c+1)) - (os / 2)
1041				}
1042
1043				if vState.Height+vState.Margin.Top+vState.Margin.Bottom+(vState.Border.Width*2) < maxH {
1044					offset += (maxH - (vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2))) / 2
1045				}
1046				propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, offset, state)
1047				vState.Y = offset
1048				(*state)[n.Children[i].Properties.Id] = vState
1049			}
1050		} else if align == "end" || align == "flex-end" || align == "self-end" {
1051			for i := row[0]; i < row[1]; i++ {
1052				vState := s[n.Children[i].Properties.Id]
1053
1054				offset := sum + self.Y + self.Padding.Top + vState.Margin.Top + contentOffset
1055
1056				if n.Style["height"] != "" || n.Style["min-height"] != "" {
1057					offset += os * float32(c+1)
1058				}
1059
1060				if vState.Height+vState.Margin.Top+vState.Margin.Bottom+(vState.Border.Width*2) < maxH {
1061					offset += (maxH - (vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)))
1062				}
1063				propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, offset, state)
1064				vState.Y = offset
1065				(*state)[n.Children[i].Properties.Id] = vState
1066
1067			}
1068		} else if align == "stretch" {
1069			for i := row[0]; i < row[1]; i++ {
1070				vState := s[n.Children[i].Properties.Id]
1071
1072				offset := sum + self.Y + self.Padding.Top + vState.Margin.Top
1073
1074				if n.Style["height"] != "" || n.Style["min-height"] != "" {
1075					offset += ((os) * float32(c))
1076				}
1077
1078				propagateOffsets(&n.Children[i], vState.X, vState.Y, vState.X, offset, state)
1079				vState.Y = offset
1080				vState.Height = maxH - (vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2))
1081				(*state)[n.Children[i].Properties.Id] = vState
1082
1083			}
1084		}
1085	}
1086}
1087
1088func justifyCols(cols [][]int, n *element.Node, state *map[string]element.State, justify string, reversed bool) {
1089	s := *state
1090	self := s[n.Properties.Id]
1091
1092	selfHeight := (self.Height) - (self.Padding.Top + self.Padding.Bottom)
1093	for _, col := range cols {
1094		yCollect := self.Y + self.Padding.Top
1095		var colHeight float32
1096		for i := col[0]; i <= col[1]; i++ {
1097			v := n.Children[i]
1098			vState := s[v.Properties.Id]
1099			colHeight += vState.Height + vState.Margin.Top + vState.Margin.Bottom + (vState.Border.Width * 2)
1100		}
1101
1102		if justify == "center" {
1103			offset := ((selfHeight - colHeight) / 2)
1104			yCollect += offset
1105			for i := col[0]; i <= col[1]; i++ {
1106				v := n.Children[i]
1107				vState := s[v.Properties.Id]
1108				yStore := vState.Y
1109				vState.Y = yCollect + vState.Border.Width + vState.Margin.Top
1110				yCollect += vState.Height + vState.Margin.Bottom + vState.Border.Width + vState.Margin.Top + vState.Border.Width
1111				propagateOffsets(&n.Children[i], vState.X, yStore, vState.X, vState.Y, state)
1112				(*state)[v.Properties.Id] = vState
1113			}
1114		}
1115
1116		if justify == "end" || justify == "flex-end" {
1117			offset := (selfHeight - colHeight)
1118			yCollect += offset
1119			for i := col[0]; i <= col[1]; i++ {
1120				v := n.Children[i]
1121				vState := s[v.Properties.Id]
1122				yStore := vState.Y
1123				vState.Y = yCollect + vState.Border.Width + vState.Margin.Top
1124				yCollect += vState.Height + vState.Margin.Bottom + vState.Border.Width + vState.Margin.Top + vState.Border.Width
1125				propagateOffsets(&n.Children[i], vState.X, yStore, vState.X, vState.Y, state)
1126				(*state)[v.Properties.Id] = vState
1127			}
1128		}
1129
1130		if justify == "space-evenly" {
1131			offset := (selfHeight - colHeight) / (float32(col[1]-col[0]) + 2)
1132			for i := col[0]; i <= col[1]; i++ {
1133				v := n.Children[i]
1134				vState := s[v.Properties.Id]
1135				yStore := vState.Y
1136				vState.Y = yCollect + vState.Border.Width + vState.Margin.Top + offset
1137				yCollect += vState.Height + vState.Margin.Bottom + vState.Border.Width + vState.Margin.Top + vState.Border.Width + offset
1138				propagateOffsets(&n.Children[i], vState.X, yStore, vState.X, vState.Y, state)
1139				(*state)[v.Properties.Id] = vState
1140			}
1141		}
1142
1143		if justify == "space-between" {
1144			offset := (selfHeight - colHeight) / (float32(col[1] - col[0]))
1145			for i := col[0]; i <= col[1]; i++ {
1146				v := n.Children[i]
1147				vState := s[v.Properties.Id]
1148				yStore := vState.Y
1149				vState.Y = yCollect + vState.Border.Width + vState.Margin.Top
1150				if col[1]-col[0] != 0 {
1151					vState.Y += offset * float32(i-col[0])
1152				} else if reversed {
1153					vState.Y += selfHeight - (vState.Height + vState.Margin.Bottom + vState.Border.Width + vState.Margin.Top + vState.Border.Width)
1154				}
1155				yCollect += vState.Height + vState.Margin.Bottom + vState.Border.Width + vState.Margin.Top + vState.Border.Width
1156				propagateOffsets(&n.Children[i], vState.X, yStore, vState.X, vState.Y, state)
1157				(*state)[v.Properties.Id] = vState
1158			}
1159		}
1160		if justify == "space-around" {
1161			offset := (selfHeight - colHeight) / (float32(col[1]-col[0]) + 1)
1162			for i := col[0]; i <= col[1]; i++ {
1163				v := n.Children[i]
1164				vState := s[v.Properties.Id]
1165				yStore := vState.Y
1166				vState.Y = yCollect + vState.Border.Width + vState.Margin.Top
1167				if col[1]-col[0] == 0 {
1168					vState.Y += offset / 2
1169				} else {
1170					vState.Y += (offset * float32(i-col[0])) + (offset / 2)
1171				}
1172				yCollect += vState.Height + vState.Margin.Bottom + vState.Border.Width + vState.Margin.Top + vState.Border.Width
1173				propagateOffsets(&n.Children[i], vState.X, yStore, vState.X, vState.Y, state)
1174				(*state)[v.Properties.Id] = vState
1175			}
1176		}
1177	}
1178}