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 describeElement(e) {
66  return {
67    style: {
68      position: parseEnum(e.style.position),
69      direction: parseEnum(e.style.direction),
70      flexDirection: parseEnum(e.style.flexDirection),
71
72      wrap: parseEnum(e.style.wrap),
73      overflow: parseEnum(e.style.overflow),
74
75      alignItems: parseEnum(e.style.alignItems),
76      alignSelf: parseEnum(e.style.alignSelf),
77      alignContent: parseEnum(e.style.alignContent),
78      
79      justifyContent: parseEnum(e.style.justifyContent),
80
81      flexGrow: parseNumber(e.style.flexGrow),
82      flexShrink: parseNumber(e.style.flexShrink),
83      flexBasis: parseDimension(e.style.flexBasis),
84
85      width: parseDimension(e.style.width),
86      minWidth: parseDimension(e.style.minWidth),
87      maxWidth: parseDimension(e.style.maxWidth),
88
89      height: parseDimension(e.style.height),
90      minHeight: parseDimension(e.style.minHeight),
91      maxHeight: parseDimension(e.style.maxHeight),
92
93      margin: parseEdges({
94        start: e.style.marginLeft,
95        end: e.style.marginRight,
96        top: e.style.marginTop,
97        bottom: e.style.marginBottom,
98      }),
99
100      padding: parseEdges({
101        start: e.style.paddingLeft,
102        end: e.style.paddingRight,
103        top: e.style.paddingTop,
104        bottom: e.style.paddingBottom,
105      }),
106
107      border: parseEdges({
108        start: e.style.borderLeftWidth,
109        end: e.style.borderRightWidth,
110        top: e.style.borderTopWidth,
111        bottom: e.style.borderBottomWidth,
112      }),
113
114      start: parseDimension(e.style.left),
115      end: parseDimension(e.style.right),
116      top: parseDimension(e.style.top),
117      bottom: parseDimension(e.style.bottom),
118    },
119
120    layout: {
121      width: e.offsetWidth,
122      height: e.offsetHeight,
123      x: e.offsetLeft + e.parentNode.clientLeft,
124      y: e.offsetTop + e.parentNode.clientTop,
125    },
126
127    children: Array.from(e.children).map(c => describeElement(c)),
128  }
129}