AUTO LAYOUT INFERENCE ENGINE
A computing system builds a graph of nodes representing design elements within a design interface having a flat structure, wherein edge weights between adjacent nodes in the graph of nodes include (1) an alignment hit count and (2) a distance measurement between the adjacent nodes. The system iteratively merges the nodes in the graph of nodes based on the edge weights, and converts, within the design interface, the flat structure into a responsive structure, with positions and sizes of the design elements unchanged, based on merging the nodes.
1 . A computer system comprising:
one or more processors; and
one or more memory resources storing instructions that, when executed by the one or more processors, cause the computer system to perform operations comprising:
building a graph of nodes representing design elements within a design interface having a flat structure, wherein edge weights between adjacent nodes in the graph of nodes include (1) an alignment hit count and (2) a distance measurement between the adjacent nodes;
iteratively merging the nodes in the graph of nodes based on the edge weights; and
converting, within the design interface, the flat structure into a responsive structure, with positions and sizes of the design elements unchanged, based on merging the nodes.
2 . The computer system of claim 1 , further comprising:
determining the alignment hit count between adjacent nodes in the graph by (1) casting rays from each corner of the adjacent nodes in both X and Y directions, and (2) counting the number of times a ray from one node intersects the other node.
3 . The computer system of claim 1 , wherein iteratively merging the nodes in the graph of nodes based on the edge weights comprises:
(a) selecting a pair of adjacent nodes with a predetermined minimum alignment hit count and a least distance measurement between them;
(b) combining the pair of adjacent nodes into a new node in the graph of nodes;
(c) removing the pair of adjacent nodes from the graph of nodes; and
(d) repeating (a)-(c) until a single node remains.
4 . The computer system of claim 3 , wherein the flat structure is converted into the responsive structure by inserting vertical stacks and/or horizontal stacks as ancestors of the design elements upon combining the pair of adjacent nodes into the new node.
5 . The computer system of claim 4 , further comprising:
setting alignments for each of the vertical stacks and horizontal stacks.
6 . The computer system of claim 4 , further comprising:
setting responsivities for each of the vertical stacks and horizontal stacks.
7 . The computer system of claim 1 , wherein the distance measurement between the adjacent nodes is a number of pixels between the closest sides of the adjacent nodes.
8 . A computer-implemented method comprising:
building a graph of nodes representing design elements within a design interface having a flat structure, wherein edge weights between adjacent nodes in the graph of nodes include (1) an alignment hit count and (2) a distance measurement between the adjacent nodes;
iteratively merging the nodes in the graph of nodes based on the edge weights; and
converting, within the design interface, the flat structure into a responsive structure, with positions and sizes of the design elements unchanged, based on merging the nodes.
9 . The method of claim 8 , further comprising:
determining the alignment hit count between adjacent nodes in the graph by (1) casting rays from each corner of the adjacent nodes in both X and Y directions, and (2) counting the number of times a ray from one node intersects the other node.
10 . The method of claim 8 , wherein iteratively merging the nodes in the graph of nodes based on the edge weights comprises:
(a) selecting a pair of adjacent nodes with a predetermined minimum alignment hit count and a least distance measurement between them;
(b) combining the pair of adjacent nodes into a new node in the graph of nodes;
(c) removing the pair of adjacent nodes from the graph of nodes; and
(d) repeating (a)-(c) until a single node remains.
11 . The method of claim 10 , wherein the flat structure is converted into the responsive structure by inserting vertical stacks and/or horizontal stacks as ancestors of the design elements upon combining the pair of adjacent nodes into the new node.
12 . The method of claim 11 , further comprising:
setting alignments for each of the vertical stacks and horizontal stacks.
13 . The method of claim 11 , further comprising:
setting responsivities for each of the vertical stacks and horizontal stacks.
14 . The method of claim 8 , wherein the distance measurement between the adjacent nodes is a number of pixels between the closest sides of the adjacent nodes.
15 . A non-transitory computer-readable medium that stores instructions, executable by one or more processors, to cause the one or more processors to perform operations comprising:
building a graph of nodes representing design elements within a design interface having a flat structure, wherein edge weights between adjacent nodes in the graph of nodes include (1) an alignment hit count and (2) a distance measurement between the adjacent nodes;
iteratively merging the nodes in the graph of nodes based on the edge weights; and
converting, within the design interface, the flat structure into a responsive structure, with positions and sizes of the design elements unchanged, based on merging the nodes.
16 . The non-transitory computer-readable medium of claim 15 , further comprising:
determining the alignment hit count between adjacent nodes in the graph by (1) casting rays from each corner of the adjacent nodes in both X and Y directions, and (2) counting the number of times a ray from one node intersects the other node.
17 . The non-transitory computer-readable medium of claim 15 , wherein iteratively merging the nodes in the graph of nodes based on the edge weights comprises:
(a) selecting a pair of adjacent nodes with a predetermined minimum alignment hit count and a least distance measurement between them;
(b) combining the pair of adjacent nodes into a new node in the graph of nodes;
(c) removing the pair of adjacent nodes from the graph of nodes; and
(d) repeating (a)-(c) until a single node remains.
18 . The non-transitory computer-readable medium of claim 17 , wherein the flat structure is converted into the responsive structure by inserting vertical stacks and/or horizontal stacks as ancestors of the design elements upon combining the pair of adjacent nodes into the new node.
19 . The non-transitory computer-readable medium of claim 18 , further comprising:
setting alignments for each of the vertical stacks and horizontal stacks.
20 . The non-transitory computer-readable medium of claim 18 , further comprising:
setting responsivities for each of the vertical stacks and horizontal stacks.