Automatic alignment with subcomponents on a visual layout

[0001] What-you-see-is-what-you-get (WYSIWYG) tools may be used by a designer to design two-dimensional visual layouts in a variety of domains including, but not limited to, user interfaces, diagramming, and reports. The productivity of the designer may be affected by usability factors of a WYSIWYG tool.

[0002] An object component of a visual layout is an object which can exist independently. Examples of object components may include, but not be limited to, tables, bar charts, and text boxes. Existing WYSIWYG tools may automatically align or “snap” edges of object components with edges of other object components. Thus, for example, when a designer repositions or resizes a text box with respect to a table and a left edge of the textbox is within a predetermined distance of a left edge of the table, the left edge of the textbox may automatically align or “snap” to the left edge of the table.

[0003] An object child component is a component nested within an object component. Object child components are independent of the object components in which they are nested. For example, an object child component may have meaning outside of a context of an object component in which it is nested. An example of an object child component may include, but not be limited to, a textbox included within an object component, such as, for example, a rectangle. When a designer repositions or resizes an object child component and an edge of the object child component is within a predetermined distance of an edge of an object component or a second object child component, the edge of the object child component may automatically align or “snap” to the edge of the object component or the second object child component.

[0004] An object subcomponent is a dependent object included within an object component. An object subcomponent may be meaningless outside of a context of an object component. An object component may include one or more object subcomponents. Examples of object subcomponents may include, but are not limited to, rows or columns within a table, bars within a bar chart, and legends within a chart or graph. When a designer repositions or resizes an item, such as, for example, an object component or an object subcomponent, if the designer wishes to align an edge of the item with an edge of an object subcomponent, the designer may manually align the edges. However, manual alignment may be awkward or impossible in some situations.

[0005] This Summary is provided to introduce a selection of concepts in a simplified form that is further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.

[0006] In embodiments consistent with the subject matter of this disclosure, a processing device, which may include a WYSIWYG tool for designing two-dimensional visual layouts, may be provided. A two-dimensional visual layout may be displayed on a display screen of the processing device. The two-dimensional visual layout may include a first object component and a second object component. A user may move or resize the first object component, or an object subcomponent thereof, or the user may resize an object subcomponent of the second object component. As a result of the moving or the resizing, an edge of the first object component or an edge of the object subcomponent of the first object component may come within a snapping distance of an edge of the object subcomponent of the second object component. The edges may be within the snapping distance when a horizontal distance or a vertical distance between the edges is less than a predetermined distance.

[0007] When the edge of the first object component or the edge of the object subcomponent of the first object component is within the snapping distance of the edge of the object subcomponent of the second object component, the processing device may attempt to align the edges. In one embodiment, the processing device may display an indicator indicating alignment of the edges. The indicator may be a visual indicator, such as, for example, a dashed line, or other visual indicator displayed on the aligned edges. In some embodiments, a resistance may be provided, such that, the first object component, or the object subcomponent of the first object component, may resist movement from an aligned position with the object subcomponent of the second object component while the aligned edges are within the snapping distance.

[0008] In some embodiments, the processing device may detect a user action for suppressing automatic alignment of an edge of a first object component or an object subcomponent thereof, with an edge of an object subcomponent of a second object component. The user action may include pressing of a hardware button, selection of a soft button, changing of a configuration option, or another user action. When the processing device detects the user action, automatic alignment of edges included in a two-dimensional visual layout may be suppressed.

[0015] Embodiments are discussed in detail below. While specific implementations are discussed, it should be understood that this is done for illustration purposes only. A person skilled in the relevant art will recognize that other components and configurations may be used without parting from the spirit and scope of the subject matter of this disclosure.

[0016] In embodiments consistent with the subject matter of this disclosure, a processing device is provided. The processing device may include a WYSIWYG tool for designing two-dimensional visual layouts including, but not limited to, dialogs, forms, diagrams, charts, and tables.

[0017] In one embodiment consistent with the subject matter of this disclosure, a processing device executing a WYSIWYG tool may display a two-dimensional visual layout. The two-dimensional visual layout may include one or more object components. A designer or user may move or resize an item, such as, for example, a first object component or an object subcomponent thereof, with respect to an object subcomponent of a second object component. As a result of the moving or the resizing of the item or the object subcomponent, an edge of the item may come within a snapping distance of an edge of the object subcomponent. In some embodiments, an edge of an item may be within a snapping distance of an edge of an object subcomponent when a horizontal distance or a vertical distance between the edges is less than a predetermined distance. In one embodiment, an edge of an item is within a snapping distance of an edge of an object subcomponent when a horizontal distance between the edges is less than a first predetermined distance or when a vertical distance between the edges is less than a second predetermined distance.

[0018] When the edges are within the snapping distance, the processing device may attempt to automatically align the edges. For example, the processing device may provide an alignment indicator to indicate alignment of the edges. In some embodiments, the alignment indicator may be a visual indicator, such as, for example, a dashed line, or other visual indicator, overlaid onto the automatically aligned edges. Further, in some embodiments, the processing device may cause resistance with respect to further repositioning or resizing of the edge of the item or the edge of the object subcomponent when the edges are within the snapping distance. As an example of resistance, in an embodiment in which the user uses a pointing device to move or resize an object component or an object subcomponent, movement of a pointer associated with the pointing device may cause movement or resizing of the object component or the object subcomponent by an amount proportionate to an amount of movement of the pointer. However, when an edge of an object component or object subcomponent is within a snapping distance of an edge of an object subcomponent of a second object component, the edges may be automatically aligned and the pointer for moving or resizing the object component or the object subcomponent may move the edges outside of the snapping distance only by moving or resizing one of the object component or the object subcomponent, such that the edges that were within the snapping distance are no longer within the snapping distance.

[0019] In some embodiments, a user may suppress automatic alignment of an edge of an item with an edge of an object subcomponent. For example, the user of the processing device may perform an action. Upon detecting the action, the processing device may suppress the automatic alignment of edges of the item with edges of the object subcomponent. The action may include pressing of a hardware button, such as, for example, a key on a keyboard, or other hardware button of the processing device, selecting a soft button from a display of the processing device, changing a configuration option via a configuration display of the processing device, or another action.

[0020] FIG. 1 is a functional block diagram that illustrates an exemplary processing device 100, which may be used to implement embodiments consistent with the subject matter of this disclosure. Processing device 100 may include a bus 110, a processor 120, a memory 130, a read only memory (ROM) 140, a storage device 150, an input device 160, and an output device 170. Bus 110 may permit communication among components of processing device 100. Processing device 100 may be a desktop personal computer (PC), a notebook PC, a handheld processing device, a tablet PC, or other type of processing device.

[0021] Processor 120 may include at least one conventional processor or microprocessor that interprets and executes instructions. Memory 130 may be a random access memory (RAM), a Flash memory, or another type of dynamic storage device that stores information and instructions for execution by processing device 120. Memory 130 may also store temporary variables or other intermediate information used during execution of instructions by processing device 120. ROM 140 may include a conventional ROM device or another type of static storage device that stores static information and instructions for processing device 120. Storage device 150 may include any type of media for storing data and/or instructions.

[0022] Input device 160 may include one or more conventional mechanisms that permit a user to input information to processing device 100, such as, for example, a keyboard, a mouse, a touch screen, or other input device. Output device 170 may include one or more conventional mechanisms that output information to the user, including one or more displays, or other output devices.

[0023] Processing device 100 may perform such functions in response to processing device 120 executing sequences of instructions contained in a tangible machine-readable medium, such as, for example, memory 130, or other medium. Such instructions may be read into memory 130 from another machine-readable medium, such as storage device 150, or from a separate device via a communication interface (not shown).

[0024] FIG. 2A illustrates an exemplary processing device display of a visual layout including a title box 202, which may be an object component, and a table 204, which may be an object component including rows and columns, which may be object subcomponents of table 204. In the exemplary display of FIG. 2A, edges of title box 202 are not within a snapping distance of the edges of the object subcomponents of table 204.

[0025] FIG. 2B illustrates the exemplary displayed visual layout of FIG. 2A after a user moved textbox 202. In this example textbox 202 has been moved left. The user may move textbox 202 by selecting and dragging textbox 202 with a pointing device, such as a computer mouse, or via other methods. As a left edge of textbox 202 moves into a position, which is within a snapping distance (in this example, a predetermined horizontal distance) of a right edge of column 1 object subcomponents 206 and a left edge of column 2 object subcomponents 208, textbox 202 may be drawn into an alignment position with respect to the right edge of column 1 object subcomponents 206 and the left edge of column 2 object subcomponents 208. Further, an indicator, such as, for example, a visual indicator, may be provided to inform the user of the aligned edges. In one embodiment, the visual indicator may be a dashed line, such as a dashed line 210 overlaid onto a right edge of column 1 object subcomponents 206 and the left edge of column 2 object subcomponents 208. In some embodiments, a resistance may be provided, such that, for example, aligned edges may tend to remain aligned unless movement or resizing of an object component or an object subcomponent causes the aligned edges to be outside of the snapping distance with respect to each other.

[0026] FIG. 2C illustrates the exemplary displayed visual layout of FIG. 2B after the user resizes text box 202. In some embodiments, the user may resize text box 202 by selecting and dragging an edge of textbox 202, or via other methods. In this example, as a right edge of textbox 202 moves into a position, which is within a snapping distance of a right edge of column 3 object subcomponents 212 and a left edge of column 4 object subcomponents 214, textbox 202 may be drawn into an alignment position with respect to the right edge of column 3 object subcomponents 212 and the left edge of column 4 object subcomponents 214. As mentioned above, an indicator, such as, for example, a visual indicator, may be provided to inform the user of the aligned edges. The visual indicator may be a dashed line such as, for example, dashed line 216 overlaid onto the right edge of column 3 object subcomponents 212 and the left edge of column for object subcomponents 214.

[0027] FIG. 3A illustrates an exemplary displayed visual layout including two object components (in this example, tables) 302, 304, each of which may include object subcomponents (in this example, rows and columns). In the exemplary display of FIG. 3A, no object subcomponent edges or object component edges of object component 302 are within snapping distance of object subcomponent edges or object component edges of object component 304.

[0028] FIG. 3B illustrates the exemplary display of FIG. 3A after a user moved object component 302 left. The user may move object component 302 by selecting and dragging object component 302 with a pointing device, or via other methods. As a right edge of column 1 subcomponents 312 (which is a left edge of column 2 subcomponents) of object component 302 moves into a position, which is within a snapping distance (in this example, a predetermined horizontal distance) of a right edge of a column A subcomponents 316 (which is a left edge of column B subcomponents 318) of object component 304, object component 302 may be drawn into an alignment position with respect to the right edge of column 1 subcomponents 312 (and the left edge of column 2 subcomponents 314) with the right edge of column A subcomponents 316 (and the left edge of column B subcomponents 318). Further, an indicator, such as, a visual indicator, may be provided to inform the user of the aligned edges. As mentioned previously, the visual indicator may be a dashed line, such as a dashed line 310 overlaid onto the right edge of column 1 object subcomponents 312 (and the left edge of column 2 object subcomponents 314) and the right edge of column A subcomponents 316 (and the left edge of column B object subcomponents 318).

[0029] FIG. 3C illustrates the exemplary displayed visual layout of FIG. 3B after the user resizes column 3 subcomponents 319. In one embodiment, the user may resize column 3 subcomponents 319 by using a pointing device and selecting and dragging a side edge of column 3 subcomponents 319. In other embodiments, other methods may be used to resize subcomponents. As a right edge of column 3 subcomponents 319 (which is a left edge of column 4 subcomponents 321) of object component 302 moves into a position, which is within a snapping distance (in this example, a predetermined horizontal distance) of a right edge of column C subcomponents 322 (which is a left edge of column D subcomponents 324) of object component 304, object component 302 may be drawn into an alignment position with respect to the right edge of column 3 subcomponents 319 (and the left edge of column 4 subcomponents 321) with the right edge of column C subcomponents 322 (and the left edge of the column D subcomponents 324). Further, an indicator, such as, a visual indicator, may be provided to inform the user of the aligned edges. As mentioned previously, the visual indicator may be a dashed line, such as dashed line 320 overlaid onto a right edge of column 3 object subcomponents 319 (and the left edge of column 4 object subcomponents 321.)

[0030] FIG. 3D illustrates an exemplary visual layout showing an object component 330 left of an object component 340. Object components 330, 340 may include row and column subcomponents. Movement or resizing of either object component 330 or object component 340, such that an edge of a subcomponent of object component 330 or an edge of object component 330 is within a snapping distance of an edge of an object subcomponent of object component 340 may cause the edges within the snapping distance to be drawn into an alignment position. In this example, the snapping distance may be a predetermined vertical distance. FIG. 3D shows an edge 345 of rows subcomponents 334 of object component 330 being aligned with an edge 347 of row subcomponents 346 of object component 340. An indicator, such as, for example, a dashed line 348 may be overlaid onto the aligned edges to inform the user of alignment of the edges.

[0031] FIG. 4 illustrates an example of a visual layout in which two bar charts may be aligned. In the exemplary visual layout, a bar chart (object component) 402 may be positioned above a bar chart (object component) 404. Bar chart 402 may include a number of subcomponents, such as, for example, bars 430, 432, 434, 436 and legends 438. Bar chart 404 may include a number of subcomponents, such as, for example, bars 440, 442, 444, 446 and legends 448. When movement or resizing of object components or object subcomponents causes an edge of an object subcomponent of a first object component to be within a snapping distance of an edge of an object subcomponent of a second object component, the edges may be drawn into an alignment position, as shown in FIG. 4 (see edges between bars 442 and 444 of bar chart 404 with respect to edges between bars 432 and 434 for bar chart 402, as well as edges of legends 438 and 448). In this example, the snapping distance may be a predetermined horizontal distance. An indicator, such as, for example, a dashed line may be overlaid onto the aligned edges to inform the user of alignment of the edges. In the exemplary visual layout of FIG. 4, dashed lines 450, 452, 454 are visual indicators for informing the user of alignment of the edges.

[0032] FIG. 5 is a flowchart illustrating an exemplary process which may be performed by a processing device, such as, for example, processing device 100, in embodiments consistent with the subject matter of this disclosure. The process may begin with the processing device displaying a visual layout (act 502). The visual layout may include a first object component and a second object component. The second object component may include one or more object subcomponents.

[0033] Next, the user may move or resize an item, which, in this example, may be a first object component or an object subcomponent of the first object component, or the user may move or resize and object subcomponent of the second object component (act 504). In one embodiment, the user may move an object component or an object subcomponent by using a pointing device and selecting and dragging the object component or the object subcomponent. The user may resize an object component or an object subcomponent by selecting an edge of the object component or the object subcomponent and dragging the edge, thereby changing a size of the object component or the object subcomponent. In other embodiments, other methods may be used to move or resize an object component or an object subcomponent.

[0034] The processing device may then determine whether automatic alignment is disabled (act 506). The user may perform an action to disable the automatic alignment. In one embodiment, the user may press or select a button to toggle the automatic alignment on or off. The button may be a hardware button, such as, for example, a key press or a sequence of key presses of keys on a keyboard, or other keys. In some embodiments, the button may be a soft button on a display of the processing device, which the user may select by touching the soft button, by selecting the soft button with a pointing device, or by using another method to select the soft button.

[0035] If the processing device determines that alignment is not disabled, then as an object component or subcomponent is moved or resized, the processing device may determine whether any edges of the item are within snapping distance of any edges of one or more object subcomponents of the second object component (act 508). Edges may be within snapping distance when the edges are within a predetermined horizontal distance or are within a predetermined vertical distance. In some embodiments, the predetermined horizontal distance and the predetermined vertical distance may be different. In other embodiments, the predetermined horizontal distance and the predetermined vertical distance may be the same.

[0036] If the processing device determines that at least some of the edges of the item are within the snapping distance of at least some of the edges of one or more object subcomponents of the second object component, then the processing device may provide automatic alignment feedback and alignment resistance (act 510). The automatic alignment feedback may include visual feedback. For example, in some embodiments, a dashed line may be overlaid onto aligned edges, as explained previously. In other embodiments, the processing device may provide other types of automatic alignment feedback. As explained previously, one or more edges of an item within a snapping distance of one or more edges of an object subcomponent of an object component, different from the object component of the item, may be drawn into alignment, or automatically aligned, when the user stops moving or resizing the item or the object subcomponent. When the one or more edges of the item and the one or more edges of the object subcomponent are no longer within the snapping distance of one another, the edges may not be drawn into alignment, or automatically aligned, when the user stops moving or resizing the item or the object subcomponent.

[0037] Next, the processing device may determine whether the user is done moving or resizing the item or the object subcomponent (act 512). In some embodiments, the user may move or resize the item or the object subcomponent by pressing and holding a button of a pointing device, such as, for example, a computer mouse or other pointing device, and moving or resizing the item or the object subcomponent with a pointer associated with the pointing device. In such embodiments, the processing device may determine that the user is done moving or resizing the item or the object subcomponent when the button of the pointing device is released. In other embodiments, the processing device may determine that the user is done moving or resizing the item or the object subcomponent via other methods, including, but not limited to, the user performing a user action, such as, a user action to close a WYSIWYG tool on the processing device, or a different user action. If the processing device determines that the moving or resizing is completed, then the process may be completed. Otherwise, acts 504-512 may be repeated.

[0038] Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms for implementing the claims.

[0039] Although the above descriptions may contain specific details, they should not be construed as limiting the claims in any way. Other configurations of the described embodiments are part of the scope of this disclosure. Further, implementations consistent with the subject matter of this disclosure may have more or fewer acts than as described, or may implement acts in a different order than as shown. Accordingly, the appended claims and their legal equivalents should only define the invention, rather than any specific examples given.