tawasuyu/taffy

1function define_element_prop(property, getter) {
2  if (!(property in Element.prototype)) {
3    Object.defineProperty(Element.prototype, property, {
4      get: function() {
5        return getter(this);
6      }
7    });
8  }
9}
10
11define_element_prop("__stretch_description__", (e) => {
12  return JSON.stringify(describeElement(e));
13});
14
15function parseDimension(input) {
16  if (input.endsWith("px")) {
17    return {
18      unit: 'points', 
19      value: Number(input.replace('px',''))
20    };
21  } else if (input.endsWith("%")) {
22    return {
23      unit: 'percent', 
24      value: Number(input.replace('%','')) / 100
25    };
26  } else {
27    return input == "auto" ? {unit: "auto"} : undefined;
28  }
29}
30
31function parseNumber(input) {
32  if (input === "" || isNaN(input)) {
33    return undefined;
34  } else {
35    return Number(input);
36  }
37}
38
39function parseEnum(input) {
40  if (input) {
41    return input;
42  } else {
43    return undefined;
44  }
45}
46
47function parseEdges(edges) {
48  var start = parseDimension(edges.start);
49  var end = parseDimension(edges.end);
50  var top = parseDimension(edges.top);
51  var bottom = parseDimension(edges.bottom);
52  
53  if (start === undefined && end === undefined && top === undefined && bottom === undefined) {
54    return undefined;
55  }
56
57  return {
58    start: start,
59    end: end,
60    top: top,
61    bottom: bottom
62  };
63}
64
65function parseSize(size) {
66  var width = parseDimension(size.width);
67  var height = parseDimension(size.height);
68  
69  if (width === undefined && height === undefined) {
70    return undefined;
71  }
72
73  return {
74    width: width,
75    height: height,
76  };
77}
78
79function describeElement(e) {
80  return {
81    style: {
82      display: parseEnum(e.style.display),
83
84      position_type: parseEnum(e.style.position),
85      direction: parseEnum(e.style.direction),
86      flexDirection: parseEnum(e.style.flexDirection),
87
88      flexWrap: parseEnum(e.style.flexWrap),
89      overflow: parseEnum(e.style.overflow),
90
91      alignItems: parseEnum(e.style.alignItems),
92      alignSelf: parseEnum(e.style.alignSelf),
93      alignContent: parseEnum(e.style.alignContent),
94      
95      justifyContent: parseEnum(e.style.justifyContent),
96
97      flexGrow: parseNumber(e.style.flexGrow),
98      flexShrink: parseNumber(e.style.flexShrink),
99      flexBasis: parseDimension(e.style.flexBasis),
100
101      size: parseSize({width: e.style.width, height: e.style.height}),
102      min_size: parseSize({width: e.style.minWidth, height: e.style.minHeight}),
103      max_size: parseSize({width: e.style.maxWidth, height: e.style.maxHeight}),
104
105      margin: parseEdges({
106        start: e.style.marginLeft,
107        end: e.style.marginRight,
108        top: e.style.marginTop,
109        bottom: e.style.marginBottom,
110      }),
111
112      padding: parseEdges({
113        start: e.style.paddingLeft,
114        end: e.style.paddingRight,
115        top: e.style.paddingTop,
116        bottom: e.style.paddingBottom,
117      }),
118
119      border: parseEdges({
120        start: e.style.borderLeftWidth,
121        end: e.style.borderRightWidth,
122        top: e.style.borderTopWidth,
123        bottom: e.style.borderBottomWidth,
124      }),
125
126      position: parseEdges({
127        start: e.style.left,
128        end: e.style.right,
129        top: e.style.top,
130        bottom: e.style.bottom,
131      }),
132    },
133
134    layout: {
135      width: e.offsetWidth,
136      height: e.offsetHeight,
137      x: e.offsetLeft + e.parentNode.clientLeft,
138      y: e.offsetTop + e.parentNode.clientTop,
139    },
140
141    children: Array.from(e.children).map(c => describeElement(c)),
142  }
143}