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	"strings"
  9)
 10
 11func Init() cstyle.Plugin {
 12	return cstyle.Plugin{
 13		Selector: func(n *element.Node) bool {
 14			styles := map[string]string{
 15				"display": "flex",
 16			}
 17			matches := true
 18			for name, value := range styles {
 19				if n.Style[name] != value && !(value == "*") && n.Style[name] != "" {
 20					matches = false
 21				}
 22			}
 23			return matches
 24		},
 25		Level: 1,
 26		Handler: func(n *element.Node, state *map[string]element.State) {
 27			s := *state
 28			self := s[n.Properties.Id]
 29
 30			verbs := strings.Split(n.Style["flex-direction"], "-")
 31			flexDirection := verbs[0]
 32			flexReversed := false
 33			if len(verbs) > 1 {
 34				flexReversed = true
 35			}
 36
 37			flexWrapped := !(n.Style["flex-wrap"] != "nowrap")
 38
 39			hAlign := n.Style["align-content"]
 40			if hAlign == "" {
 41				hAlign = "normal"
 42			}
 43			vAlign := n.Style["align-items"]
 44			if vAlign == "" {
 45				vAlign = "normal"
 46			}
 47			justify := n.Style["justify-items"]
 48			if justify == "" {
 49				justify = "normal"
 50			}
 51
 52			fmt.Println(flexDirection, flexReversed, flexWrapped, hAlign, vAlign, justify)
 53
 54			if flexDirection == "row" && !flexReversed && !flexWrapped {
 55				for _, v := range n.Children {
 56					vState := s[v.Properties.Id]
 57
 58					fmt.Println(getMinSize(&v, vState))
 59					fmt.Println(getInnerSize(&v, s))
 60					pw, ph := getMinSize(&v, vState)
 61					w, h := getInnerSize(&v, s)
 62					w += pw
 63					h += ph
 64					// !INSIGHT: if you change the width of the element then you need to re line the text...
 65					vState.Width = 100
 66					// vState.Width = w
 67					vState.Height = h
 68					(*state)[v.Properties.Id] = vState
 69				}
 70
 71			}
 72
 73			(*state)[n.Properties.Id] = self
 74		},
 75	}
 76}
 77
 78func getMinSize(n *element.Node, s element.State) (float32, float32) {
 79	minW := s.Padding.Left + s.Padding.Right
 80	minH := s.Padding.Top + s.Padding.Bottom
 81	if n.Style["width"] != "" {
 82		minW = s.Width
 83	}
 84	if n.Style["height"] != "" {
 85		minH = s.Height
 86	}
 87	return minW, minH
 88}
 89
 90func getInnerSize(n *element.Node, s map[string]element.State) (float32, float32) {
 91	minx := float32(10e10)
 92	maxw := float32(0)
 93	miny := float32(10e10)
 94	maxh := float32(0)
 95	for _, v := range n.Children {
 96		vState := s[v.Properties.Id]
 97		minx = utils.Min(vState.X, minx)
 98		miny = utils.Min(vState.Y, miny)
 99
100		maxw = utils.Max(vState.X+vState.Width, maxw)
101		maxh = utils.Max(vState.Y+vState.Height, maxh)
102	}
103	return maxw - minx, maxh - miny
104}