Tool for web page visual editor and method for web page visual editor

Abstract

To provide a tool for a web page visual editor and a method for a web page visual editor.SOLUTION: A web site construction system includes a visual editor and an editor overlap handler for determining a display instruction of the visual editor to a hidden component overlapped according to an activation condition. In the editor overlap handler, the activation condition is based on a point selected by a user of a page, an activation rule and information about a component of the page, and the information includes at least one of a component adjacent to the point selected by the user or a component interacting with the point selected by the user, a Z order, a general relation between the components of the page, information about the user, and information about the system.SELECTED DRAWING: Figure 6

Description

[Technical Field]

[0001] Cross-reference to related applications This application claims priority to U.S. Provisional Patent Application No. 62 / 626,093, filed February 4, 2018, and U.S. Provisional Patent Application No. 62 / 647,736, filed March 25, 2018, both of which are incorporated herein by reference.

[0002] The present invention relates generally to website building systems, and more particularly to component viewing and manipulation. [Background technology]

[0003] Website building systems are used by both beginners and experts to create interactive websites. Current website building systems are based on a visual editing model, and most website building systems typically provide multiple templates, with templates that may include complete sample websites, website sections, single pages, or sections of pages. System users (also called designers, subscribers, subscription users, or site editors) who build the website may design the website, and end users of the website ("user's users") may access the websites created by the users. While end users typically access the system in read-only mode, website building systems (and websites) allow end users to perform modifications to the website, such as adding or editing data records, adding talkbacks to news articles, or adding blog entries to blogs. Website building systems may actually allow multiple levels of users (i.e., three or more levels), with different permissions and capabilities assigned to each level. Users of the website building system (especially in fully or partially online configurations such as those described below) can register with a website building system server, which manages the users, the websites, and their access by end users.

[0004] A website building system may be a standalone system or embedded within a larger editing system. It may also be online (i.e., applications are edited and stored on a server), offline, or partially online (websites are edited locally but uploaded to a central server for publication). A website building system may use an internal data architecture to store website building system-based sites, which may organize the internal data and elements of the processed site within the system. This architecture may differ from the external view of the site (e.g., as displayed by end users) and typically differs from the way HTML pages are organized when sent to a browser. For example, the internal data architecture may include additional properties for each element in the page (creator, creation time, access permissions, links to templates, SEO (search engine optimization) related information, etc.) that are related to editing and maintaining the site on website building pages but are not externally visible to end users (or even some editing users). A website building system may implement part of its functionality (including both editing and runtime functionality) on a server or collection of servers and part of its functionality on client elements. The website building system may dynamically decide whether to execute some functionality on the server or on the client platform.

[0005] A website building system is responsible for creating and editing visually designed applications (such as websites) that typically consist of pages, containers, and components. Pages are displayed separately and may contain components, which may contain containers and atomic components.

[0006] A website building system can support hierarchical organization of components using various types of container components, including atomic components (text, image, shape, video, etc.) and other components (e.g., regular containers, single-page containers, multi-page containers, gallery containers, etc.). Subpages contained within a container component are called minipages, each of which may contain multiple components. Some container components can display only one minipage at a time, while others can display multiple minipages simultaneously.

[0007] Components may contain no content, or they may have internal content. An example of the first category is a star component, which has no internal content (but has color, size, position, and other parameters). An example of the second category is a text paragraph component, whose internal content includes the internal text as well as character, formatting, and positioning information. This content may, of course, vary from one instance of the text paragraph component to another. Components that have content are often called fields (e.g., "text fields").

[0008] Pages may use templates, generic page templates, or component templates. Specific cases of templates include the use of an application master page that contains components that are duplicated in all other regular pages, or the use of an application header or footer (repeated on all pages). Templates may also be used for complete pages or page sections. Website building systems can provide inheritance between templates, pages, or components, possibly including multi-level inheritance, multiple inheritance, and diamond inheritance (i.e., A inherits from B and C, and both B and C inherit from D).

[0009] The visual arrangement of components within a page is called a layout. Website building systems can also support dynamic layout processing, i.e., a process in which editing a given component (or other changes affecting it, such as externally driven content changes) can affect other components, as further described in U.S. Patent No. 10,185,703, entitled "Website Design System Integrating Dynamic Layout and Dynamic Content," issued January 22, 2019, assigned to the common assignee of the present invention, and incorporated herein by reference.

[0010] The website building system can be extended using third-party applications and components thereof, as well as list applications (as described in U.S. Patent Application Publication No. 2014 / 0282218, entitled "Website Building System Integrating Data Lists with Dynamic Customization and Adaptation," published September 18, 2014, assigned to the common assignee of the present invention, and incorporated herein by reference). These third-party applications and list applications can be added and integrated into the designed website.

[0011] Such third-party applications and list applications may be purchased (or obtained) through several distribution mechanisms, such as being pre-included in the website building system design environment, from an application store (integrated with the website building system or external to it), or directly from the third-party application vendor.

[0012] The third-party application may be hosted on the website building system vendor's own servers, on the third-party application vendor's servers, or on a fourth-party server infrastructure.

[0013] A website building system may also add procedural code to some or all of the system's entities. Such code may be written in a standard language (e.g., JavaScript), an extension of a standard language, or a language proprietary to the particular website building system. The executed code may reference APIs provided by the website building system itself or by external providers. The code may also reference constructs and objects internal to the website building system, such as pages, components, and their attributes.

[0014] Procedural code elements can be invoked via event triggers, which may be related to user activity (such as a mouse move or click, a page transition, etc.), other user-related activity (such as an underlying database or a particular database record being updated by another user), system events, or other types of conditions.

[0015] The enabled code can execute within a client component of a website building system, on a server platform, using a combination of the two, or on a dynamically determined execution platform. Such a system is described in U.S. Patent Publication No. 2018 / 0293323, entitled "System and Method for Smart Interaction Between Website Components," published October 11, 2018, assigned to the common assignee of the present invention, and incorporated herein by reference.

[0016] Typical site creation can be based on several models, including a visual editing model (where a user edits a previously created site) and an automated site generation model, or a combination thereof, as shown in FIG. 1, to which reference is now made, and described in U.S. Pat. No. 10,073,923, entitled "System and Method for the Creation and Update of Hierarchical Websites Based on Collected Business Knowledge," issued September 11, 2018, assigned to the common assignee of the present invention, and incorporated herein by reference.

[0017] It will be understood that the acronym WBS may be used throughout this specification to refer to a website construction system. FIG. 1 illustrates a system 100 including a typical website construction system 5 in communication with a client system operated by a WBS vendor staff 61, a site designer 62 (i.e., a user), a site user 63 (i.e., a user's user), and an external system 70. The website construction system 5 may further include a WBS (website construction system) site manager 10, an object marketplace 15, a WBS RT (runtime) server 20, a WBS (website construction system) editor 30, a site generation system 40, and a WBS content management system (CMS) 50. It will be understood that the elements of FIG. 1 may function as described in U.S. Pat. No. 10,073,923.

[0018] In the visual editing model, users (designers) edit sites based on one or more website templates. Website building system providers can offer multiple site (or other) templates, each of which may include a complete sample website, a website section, a single page, or a section of a page. Users may have the option of starting with an empty site (essentially a "blank page" template), but typically start with an actual site template.

[0019] Website building system providers can offer site templates ranging from very general (e.g., mobile site, e-store) to more specific (e.g., law firm, restaurant, florist) to very specific (e.g., commercial real estate law firm or Spanish tapas restaurant). Such templates are typically stored in a repository accessible to users of the website building system and are typically categorized according to business type, subtype, or industry. Templates may be created (and categorized) according to style, color range, or other parameters, beyond just business type. Site templates may be extended with additional (typically back-end) functionality, services, and code to become full-fledged vertical solutions integrated with the website building system.

[0020] Thus, a user's initial experience in creating a site with a website building system visual editor may typically involve the user selecting a template (e.g., according to style or industry type / subtype), possibly a blank template, and then editing the template in the visual editor, including editing the content, logic, layout, and attributes. Such editing may include (among other things) adapting the template and its elements to the specifics of the user's business. The user can then publish the modified site.

[0021] Under the site generation model, a website building system generates an initial site for a user based on a selected template, possibly modified by common elements that fill in information, possibly allowing follow-up editing of the generated site. This fill-in is necessary because various pieces of information (such as a business name or a description of the management team) are included in multiple locations on the template's pages. Thus, a user may need to change (for example) the business name in various places throughout the template.

[0022] Furthermore, some template elements (e.g., a generic product page) may appear multiple times, with each instance displaying details of a different instance of the underlying entity (e.g., a different product offered on the site). Such multiple instances may be specified manually (e.g., details of various people on a company's management team) or may be dynamically extracted from an external database (e.g., product details from a "products on sale" database). Such configurations are often known as "repeaters."

[0023] A template may contain fields. For example, a website building system may allow a template designer to specify fields (also called "placeholders") for insertion of values ​​in a template, such as {CompanyName}, {ProductName}, {ProductPrice}, etc. A user may also specify values ​​for fields defined in the template selected for the website.

[0024] The website building system may allow the user to enter simple or complex values ​​(e.g., text and images) as well as additional (non-field) information, such as selections of included page or website areas, colors, style information, formatting options, web display options, decorative elements (borders and backgrounds, etc.), etc.

[0025] The website building system may allow the user to enter some of this additional information before selecting a template and may use this information to aid in template selection (e.g., by narrowing the set of suggested templates). For example, the user may select a general color scheme (e.g., pastel) or style (e.g., business / formal), and the system may then use this selection to narrow the set of suggested templates.

[0026] The system may display a series of views or questionnaires to allow the user to enter values ​​or selections (for both the defined fields and the additional information described above). The system may also create connections (or bindings) between multiple instance elements of a template (as described herein above) and internal or external databases that provide the data instances used to generate the displayed instances.

[0027] Once a template is selected and its fields and additional information are specified (e.g., via a questionnaire or via binding to a data source), the website building system can generate a website containing the combined information. The user can then publish the site (via the website building system or other methods).

[0028] Website building systems can perform site creation semi-automatically using various models, such as those described in U.S. Patent No. 10,073,923. Under this model, the system collects information about the user and their website requirements from multiple sources, which may include, for example, a questionnaire completed by the user, existing user presence (such as an existing website or social media presence), industry sources (such as a generic commercial website), offline information, and internal system repositories providing information about specific business types, such as basic template information for specific business types (lawyers, restaurants, plumbers, graphic designers), possibly refined for specific industries (e.g., distinguishing real estate lawyers from personal injury lawyers).

[0029] The system can also collect information external to the system from other sites, both internal and external. Such information can influence the selection of questionnaires and layout elements provided, such as default suggestions. Such information may also be collected on an aggregate or summary basis, typically to avoid disclosing information belonging to any single user and to protect users' privacy, anonymity, and legal rights (such as copyright). Such information can be found based on information provided by users, which can be direct (e.g., existing website addresses) or indirect (e.g., trade names and geographic addresses that can be used to find information about a business).

[0030] The collected information is analyzed and placed into a repository of content elements, which are then mapped to layout elements that present content from the content elements and combine them to form a site. The layout element mapping, selection, and combination process can be fully automatic or semi-automatic (i.e., includes user interaction).

[0031] To support the above functionality, a website building system typically maintains a set of repositories stored on one or more servers or server farms. Such repositories typically include various related repositories, such as a user information / profile repository, a WBS (website building system) component repository, a WBS site repository, a business intelligence (BI) repository, an edit history repository, and third-party application repositories. The system may also include site / content creation related repositories, such as a questionnaire type repository, a content element type repository, a layout element type repository, a design kit repository, an entered questionnaire repository, a content element repository, a layout element repository, a rules repository, a family / industry repository, and the like. A description of these repositories can be found in U.S. Pat. No. 10,073,923. Summary of the Invention

[0032] According to a preferred embodiment of the present invention, a website construction system is provided, the system including: a visual editor for assisting a user in editing a website page of the website construction system, the page having a normal component and an overlapping and hidden component; and an editor overlap handler for determining a display instruction of the visual editor for the overlapping and hidden component according to activation conditions, the activation conditions being based on a point selected by a user on the page, an activation rule, and information about the components of the page, the information including at least one of components proximate to or interacting with the user selected point, z-order, and general relationships between the components of the page, information about the user, and information about the system.

[0033] Moreover, in accordance with a preferred embodiment of the present invention, the system also includes at least one database for storing activation rules, component characteristics, information about users, and information about the system.

[0034] Further, in accordance with a preferred embodiment of the present invention, the visual editor includes an input method handler for receiving a user-selected point on the page from an input device, and a component operation handler for modifying attributes of the overlapped and hidden components in accordance with the editor overlap handler.

[0035] Additionally, in accordance with a preferred embodiment of the present invention, the input device includes at least one of a mouse, a trackball, a digitizer input device, a physical human motion detector, a biometric parameter reader, a 2D pointing device, and a 3D pointing device.

[0036] Furthermore, in accordance with a preferred embodiment of the present invention, the component manipulation handlers include at least one of: a transparency handler for making overlapping or obscuring components at least one of transparent and semi-transparent; a z-order handler for modifying or preserving the z-order between all the components of the website page; a general behavior handler for changing attributes of the components according to at least one of modifying shape, zooming, resizing, moving, clipping, dynamic layout, content change, fill and color change of the components; a 3D view handler for converting all of the components to a 3D view; and a side view handler for cutting and creating and simplifying side views of the components.

[0037] Further, in accordance with a preferred embodiment of the present invention, the editor overlap handler includes a data collector that collects information about all of the components of the website page from at least one of the at least one database, a non-system element, and a system external to the system; a component relationship analyzer that analyzes relationships between all of the components of the website page; and a component visibility determiner that determines the activation conditions for the display of the overlapped and hidden components of the page by the visual editor from outputs of the data collector and the component relationship analyzer according to the user selection points and the activation rules.

[0038] Furthermore, in accordance with a preferred embodiment of the present invention, the relationship is at least one of a semantic, a hierarchical, an inter-page component relationship, and an overlap magnitude.

[0039] Additionally, in accordance with a preferred embodiment of the present invention, the data collector includes an object property collector for collecting information regarding properties of the components of the website page from the at least one database, the properties including at least one of composition, size, type, shape, edit history, layer composition / z-order, existing transparency, containment relationship, age, component type, inheritance definition, usage within the page, formatting information, and content.

[0040] Furthermore, according to a preferred embodiment of the present invention, the data collector includes a user information collector for collecting the information about the user, wherein the information about the user includes at least one of user-defined hints and user preferences; and a website information collector for collecting the information about the system, wherein the information about the system includes at least one of edit history, business intelligence, bindings to external sources of information for the website, creator, creation time, access permissions, links to templates, and SEO (search engine optimization).

[0041] Furthermore, in accordance with a preferred embodiment of the present invention, some of the components are explicitly hidden.

[0042] According to a preferred embodiment of the present invention, there is provided a method for a website construction system, the method including: enabling a user to edit a website page of the website construction system, the page having normal components and overlapping and hidden components; and determining display instructions for the overlapping and hidden components according to activation conditions, the activation conditions being based on a user-selected point on the page, an activation rule, and information about the components of the page, the information including at least one of components proximate to or interacting with the user-selected point, z-order, and general relationships between the components of the page, information about the user, and information about the system.

[0043] Additionally, in accordance with a preferred embodiment of the present invention, the method also includes storing activation rules, component characteristics, information about the user, and information about the system.

[0044] Further in accordance with a preferred embodiment of the present invention, the enabling includes receiving a user-selected point on the page from an input device and modifying attributes of the overlapping and hidden component in accordance with the determining display instructions.

[0045] Furthermore, in accordance with a preferred embodiment of the present invention, the input device includes at least one of a mouse, a trackball, a digitizer input device, a physical human motion detector, a biometric parameter reader, a 2D pointing device, and a 3D pointing device.

[0046] Additionally, according to a preferred embodiment of the present invention, modifying the attributes includes at least one of making overlapping or obscuring components transparent and / or semi-transparent; modifying or preserving the z-order between all the components of the website page; changing the attributes of the components according to at least one of modifying the shape, zooming, resizing, moving, clipping, dynamic layout, content change, fill and color change of the components; converting all of the components to a 3D view; and cutting and creating side views of the components to simplify them.

[0047] Furthermore, according to a preferred embodiment of the present invention, determining the display instructions includes collecting information about all of the components of the website page from at least one of the at least one database, a non-system element, and a system external to the system, analyzing relationships between all of the components of the website page, and determining the activation conditions for the display of the overlapped components of the page by the visual editor from output of the data collector and the component relationship analyzer according to the user selection points and the activation rules.

[0048] Furthermore, in accordance with a preferred embodiment of the present invention, the relationship is at least one of a semantic, a hierarchical, an inter-page component relationship, and an overlap magnitude.

[0049] Still further, in accordance with a preferred embodiment of the present invention, the collecting includes collecting information regarding characteristics of the components of the website page from the at least one database, the characteristics including at least one of: composition, size, type, shape, edit history, layer composition / z-order, existing transparency, containment relationship, age, component type, inheritance definition, use within the page, formatting information, and content.

[0050] Additionally, according to a preferred embodiment of the present invention, collecting includes collecting information about the user, wherein the information about the user includes at least one of user-defined hints and user preferences; and collecting information about the system, wherein the information about the system includes at least one of edit history, business intelligence, bindings to external sources of information for the website, creator, creation time, access permissions, links to templates, and SEO (search engine optimization).

[0051] Moreover, in accordance with a preferred embodiment of the present invention, some of the components are explicitly hidden. [Brief explanation of the drawings]

[0052] The subject matter which is regarded as the invention is particularly pointed out and distinctly claimed in the concluding portion of this specification. The invention, however, both as to organization and method of operation, together with the objects, features, and advantages thereof, will best be understood by reading the following detailed description when taken in conjunction with the accompanying drawings.

[0053] [Figure 1]1 is a schematic diagram of a prior art website building system and a typical representation of a page created using the website building system; [Figure 2] FIG. 1 is a schematic diagram of the effect of the selection sensitivity radius of the prior art. [Figure 3] FIG. 1 is a schematic diagram of a prior art selected component list widget. [Figure 4] 1 is a schematic diagram of a system for handling overlapping objects in a visual editing system, constructed and operative in accordance with the present invention; [Figure 5] 5 is a schematic diagram of elements of the content management system of FIG. 4 constructed and operative in accordance with the present invention; [Figure 6] 5 is a schematic diagram of the elements and workflow of the editor overlap handler and WBS editor of FIG. 4, constructed and operative in accordance with the present invention; [Figure 7A] 5 is a schematic illustration of the exposure of hidden components by the system of FIG. 4, constructed and operative in accordance with the present invention; [Figure 7B] 5 is a schematic illustration of the exposure of hidden components by the system of FIG. 4, constructed and operative in accordance with the present invention; [Figure 7C] 5 is a schematic illustration of the exposure of hidden components by the system of FIG. 4, constructed and operative in accordance with the present invention; [Figure 8] 5 is a schematic diagram of a partial exposure of hidden components by the system of FIG. 4, constructed and operative in accordance with the present invention; [Figure 9] 5 is a schematic diagram of the integration of dynamic layout techniques when revealing hidden components by the system of FIG. 4, constructed and operative in accordance with the present invention. [Figure 10] 1 is a schematic illustration of horizontal and vertical projections onto an axis of a web page, constructed and operative in accordance with the present invention; [Figure 11] 1 is a simplified diagram of a display generated based on cutting the X / Z and Y / Z vertical planes at a cursor point of a web page, constructed and operative in accordance with the present invention; [Figure 12]1 is a schematic illustration of a fisheye grid constructed and operative in accordance with the present invention; [Figure 13] 1 is a schematic illustration of a display of a web page using an extended frame, constructed and operative in accordance with the present invention;

[0054] It will be appreciated that for simplicity and clarity of illustration, elements shown in the figures have not necessarily been drawn to scale. For example, the dimensions of some of the elements may be exaggerated relative to other elements for clarity. Furthermore, where considered appropriate, reference numerals may be repeated among the figures to indicate corresponding or similar elements. DETAILED DESCRIPTION OF THE INVENTION

[0055] In the following detailed description, numerous specific details are set forth in order to provide a thorough understanding of the present invention. However, it will be understood by those skilled in the art that the present invention may be practiced without these specific details. In other instances, well-known methods, procedures, and components have not been described in detail so as not to obscure the present invention.

[0056] Applicant has recognized that the current website building process is an important part of a company's business operations, and that the ease of creating and editing a website is an important consideration when selecting a website building system. Applicant has further recognized that websites and web applications are more than just collections of data or documents or computer programs. While they contain a significant amount of content, websites can be thought of as digital substitutes for many different real-world products and services, such as newspapers, online shops, online universities (i.e., allowing for registration, payment, viewing lectures, etc.), ticket issuing agencies, magazines, photo galleries, social gathering places, etc. In other words, websites provide a real-world experience from real items (food, clothes, tickets, photos, documents, washing machines, etc.) that can be purchased and received, and that affect the creation, placement, and behavior of real-world items and real-world processes related to those items.

[0057] Applicant has also recognized that when editing web pages and other multi-layered visual displays or designs, it is not so easy to select objects that are hidden or obscured (overlapping / covering) by other objects, and such selection typically requires various editing operations such as moving, resizing, rotating, erasing, changing attributes, changing z-priority, content editing, etc.

[0058] A website designer (also called a user of a website building system) may be required to click (for example) on a specific handle on the frame of an object for editing, including the frame of an overlapping object, an internal region, or the possibility to use different handles for different purposes. Selection may be a single object selection or a multiple selection.

[0059] Also, overlapping objects may be much larger than the object they overlap, but overlapping objects may have the same or very similar size as the object they overlap (e.g., multiple frames may be inside each other and have very similar sizes, or may be the same size, just one on top of the other). It will also be understood that a website design may include more than one layer and therefore multiple levels of overlap and occlusion.

[0060] Existing prior art systems have attempted to solve the selection problem using various techniques. For example, in many methods, a user selects a desired point on an edited page (using a mouse or similar means). The selected point may have a sensitivity attribute, i.e., a radius of pixels around the selected point that captures all intersecting objects, as shown in FIG. 2, referenced herein. As shown in FIG. 2, selecting point [x] (for frame selection) actually selects only those objects whose frame or region intersects with circle [y], i.e., objects [a], [b], and [c]. Distant object [d] is not selected. Object [e], which is contained within object [c] but not within the radius of circle [y] and is therefore considered too far from point [x], is also not selected. It is understood that selection by traversing a frame and by traversing a region may be considered two separate methods of selection, and that system 200 may implement either method or both methods (e.g., depending on user settings).

[0061] Existing prior art systems also typically use an edit area display option for object selection, which requires using methods / behaviors such as display as normal, display in frame mode (i.e., display only the object frame equal to 100% transparent for the object fill / content), displaying the object as semi-transparent, displaying the object partially in frame or semi-transparent mode, and displaying the object configured in semi-transparent 3D showing layers (including allowing 3D rotation and panning). Other options include selecting by clicking the edit area location (which can "grab" multiple objects or frames) and marking a screen area (e.g., dragging a rectangle or circle) which will select all objects (including hidden objects) that intersect with the specified marked area.

[0062] When a user selects multiple (and possibly overlapping) objects (e.g., as used by the PowerPoint presentation program commercially available from Microsoft), one option is to display a list of the selected components, which will also include all overlapping or hidden components in the selection. The user can then select an object or objects from the list. This list can be displayed using a list widget, embedded in the regular editor UI, or floating next to the selected point / area. The list widget can display details of the objects or other representations of the objects (e.g., their thumbnails), or some kind of structural view of the objects on the page or a subset thereof. Reference is now made to FIG. 3, which illustrates such a selected components list widget.

[0063] A second option (e.g., used by AutoCad, commercially available from Autodesk Inc.) is selection cycling. A selection action selects the topmost object (i.e., the one "closest" to the user). Further modified selection actions (e.g., shift-select) cycle through alternative selections, possibly highlighting them in some way.

[0064] The applicant further recognized that a solution to the above-mentioned selection deficiencies is a system that includes a method by which a user can select and manage complex configurations of multiple components that may obscure or hide one another when editing a page. The system may further reveal overlapped / hidden objects when the mouse passes near a rectangle that encloses the overlapped / hidden objects according to certain activation conditions. This can be done, for example, by highlighting the outline of the hidden objects to reveal the hidden objects. The system may also highlight other parts of the hidden objects, such as their fill pattern or content. The system can also reveal objects or portions thereof when the objects (or their hidden objects) are manipulated in a specific way (e.g., moved or resized). Other effects may also include optical or geometric distortion of the objects, their layout, and the use of dynamic layouts. Thus, the system can assist the user in selecting and manipulating hidden objects.

[0065] It will be appreciated that any manifestation of an object can be subject to activation conditions based on predefined rules. The rules can be based on object characteristics, including user activity, user information, site information, or relationships between objects on related pages. Thus, it will be further appreciated that the system of the present invention can differ from prior art systems because display behavior depends on specific objects and the various relationships between them.

[0066] The system can also limit reveal to a predetermined number of (z-priority) levels below the overlapping object (e.g., no more than one or two levels down). Alternatively, the system can allow for incremental discovery of multiple levels, i.e., making more levels visible as long as the mouse remains in the relevant activation location (e.g., near the edge of the overlapping component) and / or other requirements for the activation condition are met. Thus, the system could (for example) reveal any one level-down component after X seconds, and then reveal another successive level of overlapped components every Y additional seconds of mouse hover.

[0067] It will also be appreciated that using this feature to "find" hidden objects, a user can "tour" additional hidden objects by moving the mouse inside or near the hidden object to reveal additional hidden objects, each of which may be highlighted and partially visible as the mouse approaches it. It will further be appreciated that the system's response to such touring may depend on additional parameters, including the user's current behavioral profile and the user's past behavior. Thus, for example, a user who moves the mouse rapidly can reasonably be assumed to be very uninterested in the appearance and disappearance of hidden objects, and the appearance of objects may depend on the speed of mouse movement; therefore, the user may slow down the speed of mouse movement once the user begins to tour the actual "area of ​​interest." In another example, if a user selects (or otherwise interacts with) a "deeper" object in a given area and has done so many times in the past, the system may reveal such deeper objects sooner than the normal rule set dictates.

[0068] It will also be appreciated that the present system is not limited to input selection using a mouse, but may use other input devices based on various forms of input technology. Applicant has also realized that the system's ability to work with a variety of input devices (described in more detail below) along with adjustable activation rules may be advantageous for users with limitations or disabilities that make it difficult to precisely locate a component they wish to edit, such as users suffering from Parkinson's disease.

[0069] Reference is now made to Figure 4, which illustrates a system 200 for handling overlapping objects in a visual editing system, according to one embodiment of the present invention. System 200 may include elements of system 100 as described in U.S. Patent No. 10,073,923 (and any sub-elements) in conjunction with an editor overlap handler (EOH) system 80. System 200 may enable hidden or overlapping component visibility dependent on activation conditions, as described in more detail below.

[0070] It will be appreciated that the repositories within CMS 50 may also include an activation condition rule repository 518 for storing activation rules, along with other website building system related repositories 501-516 and a CMS coordinator 517, as described in U.S. Patent No. 10,073,923 and shown in FIG. 5. It will be appreciated that the activation rules may be predefined or may be adapted using machine learning and / or artificial intelligence information stored in repository 515.

[0071] Reference is now made to Figure 6, which illustrates the elements and relationships of the EOH system 80 and the WBS editor 30. In addition to the subcomponents described in U.S. Patent No. 10,073,923, the WBS editor 30 may further include an input method handler 31 and a component operation handler 32. The component operation handler 32 may further include a transparency handler 321, a z-order handler 322, a general behavior handler 323, a 3D display handler 324, and a side display handler 325. It should be understood that the subcomponents of the operation handler 32 may be responsible for modifications, including specific types of component attributes, as described for each handler, as described in more detail herein below.

[0072] It will be appreciated that the WBS editor 30 may implement its own display infrastructure separate from the functionality of the component operation handler 32. The display infrastructure may handle the actual display as directed by the component operation handler 32 (an example of this would be a mobile application that does its own rendering). The WBS editor 30 may also render and send the results elsewhere for actual display (e.g., a server-side rendering system where the actual rendering occurs on a server). The actual display may be handled entirely by a different element of the system or by a different machine.

[0073] The WBS editor 30 also operates within a platform (such as a browser) and can generate and / or modify data structures of the platform (such as the DOM within the browser) used by the browser for the actual display.

[0074] Thus, based on the configurations described above in this specification, the system 200 may find it easier to resolve selection-related component changes in combination with other complex changes, such as dynamic layout changes due to concurrent content and / or presentation changes.

[0075] It will be appreciated that the component manipulation handler 32 and its sub-elements generally can handle changes to the in-memory structure of the website building system maintained by the WBS editor 30 during an editing session. For example, a user can set a component to transparency X to facilitate review of hidden objects, in a similar way that a user can change the transparency of a component themselves.

[0076] It will be appreciated that one major difference is that changes made to the in-memory edit-time data structures of the WBS by the operation handler 32 are typically temporary. This may be done, for example, by having an actual expiration timer for them, by having an expiration process (i.e., they change back gradually over time), or by reverting the changes based on the passage of time and / or user activity (e.g., when the user stops processing the revealed component).

[0077] From this specification, the discussion of system 200 will refer to applications created by a website-building system and accessed by end users as websites; however, system 200 may also apply to other categories of online applications accessed using specific client software (which may or may not be proprietary). Such client software may run standalone or be activated from a browser (e.g., an Adobe Flash plug-in). End users may access these websites using the client software on ordinary personal computers, as well as on smartphones, tablet computers, and desktop, mobile, or wearable devices. Alternatively, system 200 may be applicable to systems for generating mobile applications, native applications, or other application types, such as those described in U.S. Patent No. 9,996,566, entitled "Visual Design System for Generating a Visual Data Structure Associated with a Semantic Composition Based on a Hierarchy of Components," issued June 12, 2018, which is assigned to the common assignee of the present invention and incorporated herein by reference.

[0078] It will be appreciated that all elements of the system 200 are generally capable of processing objects or components of a website building system.

[0079] The input method handler 31 can monitor and identify the location of the mouse cursor or any other input device or placement of any particular activity performed by the user when manipulating the associated hidden / obscured components (selecting them, dragging them, etc.). The following discussion refers to selections made using a mouse operating within the visual editor. However, such selections can also be made using any other 2D or 3D pointing device, such as a trackball, digitizer input device, biometric parameter reader, gesture / hand movement / eye movement detection, or any other device.

[0080] As described above in this specification, the component manipulation handler 32 can manipulate the visibility of components in the vicinity of the mouse cursor placement according to activation conditions determined by the EOH system 80, as described in more detail below in this specification.

[0081] The EOH system 80 further includes a component evaluator 81 and a component visibility determiner 82, which determine which hidden and overlapping components to display to the user and how, based on input selections. The component evaluator 81 may further include a data collector 811 and a component relationship analyzer 812. The data collector 811 may continuously collect information from the WBS editor 30, the CMS 50 repository, and other system elements (e.g., user information and interactions, website information, etc.), and the data collector 811 may also collect information from systems external to the system 200 and other non-system elements, as described in U.S. Pat. No. 10,185,703. The component relationship analyzer 812 may analyze changing relationships between components on related websites, as described in U.S. Pat. No. 10,176,154, entitled “System and Method for Automated Conversion of Interactive Sites and Applications to Support Mobile and Other Display Environments,” issued Jan. 8, 2019, assigned to the common assignee of the present invention, and incorporated herein by reference. It will be appreciated that such analysis can include, for example, offline analysis that combines a thorough analysis performed at the time of page save with a quicker follow-on analysis that processes changes made during editing and since the last save.

[0082] The data collector 811 may further include an object property collector 8111, a user information collector 8112, and a website information collector 8113. The functionality of these elements is described in more detail herein below.

[0083] The component visibility determiner 82 can determine activation conditions based on the results of the component evaluator 81 along with rules stored in the activation condition rules database 518. It will be further understood that activation conditions can be based on object and associated properties / relationships, including, but not limited to, configuration, size, position, type, shape, edit history, layer configuration / z-order, existing transparency, containment relationships, age, inheritance definitions, use within the application, formatting information, and content. They can also be based on native reading order, inter-page component relationships (dynamic layout anchors, detected grouping semantics, or otherwise), any bindings (e.g., data bindings) to external resources / databases, component hints from templates, user-defined hints, collected BI (business intelligence) about object usage, page and application (in an edit or runtime context), and component / content classifications (such as those described herein above in connection with U.S. Pat. No. 10,073,923), or hints provided by the site generation system 40 or similar sources. This information may be collected accordingly by the object property collector 8111 or the website information collector 8113. The component visibility determiner 82 may also take into account information related to the hidden component(s), the obscuring component(s) (e.g., not revealing components obscured by a repeater component), or other related components (within the page or otherwise).

[0084] Activation conditions may also be based on user-related information (collected by user information collector 8112) such as user type, user location, user industry / family, and user client device information (device, OS, browser, screen size, etc.) As described herein above, all of this information may be stored and retrieved from CMS 50, as shown in FIG. 5, to which reference is now made.

[0085] It will be understood that the following discussion refers to visual editing of web pages made up of multiple components, but the present invention is equally applicable to visual editing of interactive applications (desktop or mobile) or any type of visual editing of multi-object compositions where objects can obscure or otherwise overlap other objects as described herein above.

[0086] The component evaluator 81 may receive information about user activity as well as coordinates or any other input information from the input method handler 31 indicating the user's cursor location (such as the cursor velocity example described above). The data collector 811 can collect appropriate data based on the component currently located within the selected coordinates, and the component relationship analyzer 812 can analyze the relationships between the selected region or component and other nearby components, such as their semantics, layering, and the amount of any overlap between components as described herein. For example, if a user hovers their mouse over a hidden semantic group containing a photo with a caption, both may appear, subject to activation conditions. Furthermore, after some latency, additional nearby caption / image pairs (forming higher-level semantic groups) will appear as well.

[0087] Based on the results of the component evaluator 81, the component visibility determiner 82 can determine activation conditions for the selected component and any other hidden overlapping components in the vicinity based on predetermined rules as described in more detail below, and instruct the component operation handler 32 to update the visibility of the relevant nearby components and present them to the user accordingly.

[0088] Figures 7A, 7B, 7C, and 8 show example scenarios of how overlapping / hidden components can be revealed based on various activation conditions. It will be appreciated that for Figures 7A, 7B, 7C, and 8, the diagrams may use one or more types of dashed lines (- -) to indicate components that are defined at the location indicated by the dashed line but are not actually visible to the user because they are obscured (e.g., by another component).

[0089] Referring now to FIG. 7A , as shown, component A overlaps (and obscures) component B (scenario 1). When the mouse [x] is placed over component A in a position that is over B's region (or perhaps close enough to B's frame), B's frame is revealed according to the associated activation condition (scenario 2). In alternative embodiments, component B can be revealed by temporarily "bringing it to the front" (as discussed herein below with respect to selection), possibly by making component A semi-transparent, either entirely or in specific subregions that include or cover B's region or frame, using both permanent and temporary parameters of z-ordering, or by applying visual effects or other visual markings to the relevant subregions of components A, B, or both. Such visual effects can also include animations or characteristic animations (e.g., blinking component B's frame, continuously changing color or transparency, or slightly moving / vibrating the subregion of component A that covers component B, etc.). System 200 may use different types of visual effects or markings for different components that are simultaneously revealed (e.g., as in the case where touching a single concealing component reveals multiple hidden components, as described in more detail herein below).

[0090] The activation conditions may depend on predetermined activation rules stored in the repository 518, such as (for example) component B being one layer down from component A, or B being sufficiently smaller than A (e.g., size(B)<70%*size(A)-per area, or per each axis).

[0091] When the user clicks with the mouse, the WBS editor 30 can move the viewing focus to component B, select component B, or move component B in front of component A (either temporarily during manipulation or permanently), allowing the user to select and manipulate component B.

[0092] It will be appreciated that manipulation of a (previously hidden) component can also affect component layering. For example, suppose component B is below (i.e., hidden by) component A, and component A is a container, then the user can place container A on top of component B. In such a case, initially component B is not contained in component A (because A is placed on top of B), but if component B is moved a little (by dragging and dropping), container B becomes a member of container component A.

[0093] It is understood that the system 200 can support a "lock z-order" component attribute for some or all of its component types. In this case, for such components (even if selected), the z-order handler 322 (and the WBS editor 30) can ensure that they do not "move forward" or move up one or more layers when manipulated after being selected, thus avoiding problems associated with unintentionally changing their z-position in the established component hierarchy. For example, under the concept of temporary z-rank, the temporary z-rank can revert to the normal z-rank (or the object can be marked as "no temporary rank") under several conditions, such as the user stopping manipulation of the object for a period of time, starting manipulation of another object, clicking an unrelated location, interacting with other parts of the system UI, the user leaving the page, or the user leaving the system (i.e., ending the editing session). In this way, a "brought forward" component will "go back to its place."

[0094] System 200 may also allow components to be flagged with an attribute that is "unselectable when overlapped." In this scenario, system 200 may still reveal the component in some way when the mouse is over it (e.g., by making the overlapping component transparent, as shown in scenario 2 of FIG. 7B), but visibility determiner 82 may determine that actual selection of the overlapping component is not permitted.

[0095] It will be appreciated that such attributes may be changed using the normal component attribute editing UI (e.g., properties associated with the component) or a specific "unlock" UI function associated with the z-order locked component (e.g., a button or handle H that appears next to the component when the mouse hovers near the component, as referenced in Scenario 2 of Figure 7C).

[0096] It will be further appreciated that system 200 may also account for overlapping regions of only partially overlapping components (i.e., "complete them" into complete components). Again, this may depend on the degree of overlap measured above (e.g., whether the overlapping region, the intersection of components A and B (as seen in Scenario 1 of FIGS. 7A-7C), is "small enough" compared to A and / or large enough compared to B based on activation rules).

[0097] In alternative embodiments, selection of overlapped component B may be performed using alternative methods other than by hovering or clicking on component B (or on component B or near the frame of component B). This may be via a special UI element (e.g., a dedicated button, a specific handle added to, or another UI component), another selection method (e.g., a "shift-click" or "control-click" combination), a specific mouse gesture, or any other means. Such selection may also use a specific selection area (or specific selection handle) associated with the associated component that may be dynamically displayed when relevant (e.g., when the mouse approaches the frame of the associated component).

[0098] Refer now to FIG. 8, which illustrates the case where component A completely obscures component B. In scenario 1, component B remains obscured because the mouse [x] is not close enough to component B for the activation conditions to be met according to the present activation rules. In scenario 2, when the mouse [x] approaches component B and the applicable activation conditions are met, the four corner markers (y1, y2, y3, and y4) of component B become visible. In an alternative embodiment, these markers can serve as manipulation handles for component B (allowing component B to be moved, resized, rotated, or otherwise modified). In another embodiment, the user can simply click on the handles or move the mouse near them to reveal the rest of component B.

[0099] In an alternative embodiment, system 200 may reveal hidden (overlapping) elements (e.g., component B) as in Figure 8 (scenario 1) when the mouse is placed over an overlapping component rather than over the overlapping component. Thus, when the mouse is placed near (or over an area within) the frame of overlapping component A, all of the "sufficiently small" (as described above herein) components that A overlaps (and for which activation conditions are met) are revealed. It will be appreciated that, due to these activation conditions, WBS editor 30 may reveal only a subset of components hidden by component A or overlapping component A, based on the functionality of EOH system 80.

[0100] It will also be appreciated that a single user action (e.g., a mouse movement) may affect multiple obscuring components. For example, for an embodiment of system 200 (described above) in which a hidden component is revealed when the mouse is placed over the obscuring component, if a user edits a page with multiple obscuring components that slightly overlap each other in region X, system 200 may initiate a reveal process for the multiple obscuring components, and possibly reveal multiple components that are obscured by some or all of them (and possibly using different reveal methods or different visual effects or markings for the different revealing components, as described above).

[0101] Other effects performed by the component manipulation handler 32 may include a transparency handler 321 that makes the component slightly (10%) transparent, possibly only relevant to overlapping components that meet an activation condition. Alternatively, when the user manipulates the component, it may become significantly more transparent (e.g., 90%), revealing components layered below it, for as long as the hidden component is manipulated (or based on some other transparency duration definition). It will be appreciated that the transparency change operation applied by the transparency handler 321 may enable the user to select a previously hidden component.

[0102] Component manipulation handler 32 may also be invoked when moving a component, resizing a component, rotating a component, or indirectly modifying a component, all of which may be based on activation conditions. For example, if the size or position of component X changes due to a modification to another component or element Y that affects component X via dynamic layout (as described in U.S. Patent No. 10 / 185,703, entitled "Web Site Design System Integrating Dynamic Layout and Dynamic Content," issued January 22, 2019, assigned to the common assignee of the present invention, and incorporated herein by reference). For example, if a user types additional text into component Y, which "stretches down" and depresses component X, the movement of component X may reveal some of the other components obscured by X.

[0103] Referring now to Figure 9, which shows how component Y expands downward by typing additional text using dynamic layout functionality. Component Y "pushes" component X down via anchor [a] between the bottom edge of Y and the top edge of component X. Components C1 and C2 are partially visible in scenario 1, but are completely obscured by component X in their new position in scenario 2. Transparency handler 321 can mark X as slightly visible when the dynamic layout process is performed to allow for future manipulation of C1 and C2. Such changes may be temporary, allowing C1 and C2 to be manipulated / modified once the dynamic layout changes stop (i.e., no more text is added to component Y).

[0104] The system 200 may also use component-specific variants. It will be appreciated that the system 200 may have complete information about the edited / displayed component, including its type, parameters, configuration, content, and attributes. Thus, the generalized behavior handler 323 may use alternate or modified component versions for overlapping or overlaid components when displaying in "transparent mode." The generalized behavior handler 323 may also apply such modifications to components at all z-order levels, such as when an overlapping component itself overlaps another component lower in the z-order. The displayed alternate version includes not only the component's frame area but also additional information (e.g., added / modified component frame and content information), which may provide better context to the user when being edited through transparent display.

[0105] For example, a frame component may include sophisticated frame or bevel handling. However, a modified version may provide simpler frame / bevel information. Another example would be a video player that is displayed using outline versions of the video controls (these controls may display different sets of buttons, button frames, or UI variants).

[0106] In another example, a component may be a geometric shape that also contains particular content (such as a particular fill pattern and color gradient). A modified version may use an outline version of the geometric shape rather than a simple enclosing rectangle.

[0107] In yet another example, modified components may be displayed by the WBS editor 30 (via the component operation handler 32) along with the modified content (instead of or in addition to component frame modifications), possibly generated based on a manipulation or simplification of the original content. For example, an image component may be displayed with an outline version of the included image (based on image analysis and feature extraction) that allows better visibility of overlapping components, instead of the original "full" image. This functionality may be further adapted to use a monochrome or grayscale display instead of the original color (thereby reducing the visual burden on the user when viewing components hidden under the image).

[0108] Additionally, a component may be responsible for its own display, or at least provide information or hints to the system 200 about how to display it. In such cases, modifications (such as those described above) may be implemented at the component level, the website building system level, or both. As an example, the component operation handler 32 may perform image analysis (e.g., feature extraction and simplification) and apply it to a specific component instance based on hints provided by the component. Sophisticated components may not only provide hints, but also provide complete processing plug-ins that can be integrated into such implementations and provide component-specific functionality.

[0109] Of course, the system 200 may use mixed 2D-3D representations. For example, the 3D display handler 324 may convert only the currently "hidden" component region into a 3D displayed subregion (occupying a portion of the page display) that can be manipulated using 3D operators. This may be easier to understand than converting the entire page (or displayed screen area) into a 3D representation. The 3D displayed component subset may be limited (for example) by region, context, sub-hierarchy, or other component relationships (e.g., display only components that intersect a given region and their contained subtrees).

[0110] It should be further understood that system 200 may also add one or more projections of the three-dimensional site component configuration to aid the user in editing, potentially avoiding the use of a 3D view that may be difficult for some users to understand. Such additional views or projections may be continuously updated while the main view is updated and may allow limited or complete editing to be performed within them. Alternatively, system 200 may use a projection view in combination with a full or partial 3D view (as described herein above).

[0111] For example, two side views can be added. Reference is now made to FIG. 10, which illustrates the horizontal / vertical projection of an entire web page onto an axis. As shown, a typical view of an edited component [B] is displayed in a normal editing window [A]. Component 51 is visible, with second layer component 61 and third layer components 71, 72, 73, and 74 hidden underneath. As discussed above in this specification, the hidden second / third level components are depicted inside [B] with dashed lines. These hidden components are not actually visible to the user during normal editing (although features of system 200 may make them visible).

[0112] It will be understood that the component arrangement is positioned in 3D space, with the X axis being horizontal, the Y axis being vertical (as shown), and the Z axis up / down being "to / from the screen." Thus, the various views shown include:

[0113] View [C] (y-side view) shows how the component is projected onto the XZ plane located at y=(-infinity),

[0114] View [D] (x-side view) shows how the component is projected onto the YZ plane located at x=(+infinity).

[0115] These projections may reveal some or all of the hidden components, and may actually introduce new occlusion relationships. For example, in view [C], we can see that component 74 occludes component 73. In view [D], components 73 and 74 partially occlude component 72, which in turn occludes component 71.

[0116] It will be appreciated that the side display handler 325 can create simplified side views that are similar to the main view but simple enough for the user to select components more easily. However, it will be further appreciated that they may be simplified, they may still have obscuring relationships, and may still require dynamic transparency processing. Indeed, given that they are 2D and that websites are typically designed so that objects are aligned on X-axis parallel or Y-axis parallel lines, there may be more precise positional overlap in the side view than in the normal view. Typically, elements of the component manipulation handler 32 can all modify the underlying data structures (used for the 3D / side views) to support selection in these views. Furthermore, it will be appreciated that there are different transparency requirements for each of the views (main view, 3D view, side view*2), which necessitate different modifications to the underlying data structures. This can be solved by compensating according to the view the user is focused on (e.g., detected via mouse position, eye movement tracking, etc.), or by having a rendering or display system that can generate multiple views of the same underlying data structures based on multiple "layers" of modifications.

[0117] Side display handler 325 can operate on these side views (to "un-hide" components) just as it does on the main view. So, for example, when the user hovers the mouse over the projection of component 74 in view [C], side display handler 325 may make component 74 transparent inside view [C], displaying the hidden component 73.

[0118] The side display handler 325 can also add cutting lines, i.e., horizontal and / or vertical lines that can be attached to the cursor position. Referring now to Figure 11, which uses the same component configuration as Figure 10, however, in this scenario the side view reflects the intersection between the component and the plane based on the cutting lines (instead of a projection to plus / minus infinity as described above). for example:

[0119] The XZ plane is based on the horizontal cutting line 81 (shown in side view [C]),

[0120] The YZ plane is based on the vertical cutting line 82 (shown in side view [D]).

[0121] The two cutting lines 81 and 82 may intersect at the mouse position.

[0122] As can be seen from FIG. 11, side view [C] does not show components 73 or 74 (which do not intersect with section line 80), and side view [D] does not show components 71 or 72 (which do not intersect with section line 81).

[0123] It will be appreciated that the particular components shown in any side view may change dynamically as the user moves the cursor (and section line) to reflect an updated set of intersecting components. System 200 can also perform hidden component processing in section-line-based side views, just as in the main view as described herein above.

[0124] The side display handler 325 may also provide another mechanism for the user to move the cutting line, such as dragging it with the mouse (rather than having the cutting line stay fixed at the cursor position).

[0125] The generic behavior handler 323 can also apply changes to obscuring / hidden components, for example, by changing the size of the objects to allow for better differentiation. For example, component A will obscure component B if component A and component B have the same or very similar size in one or both dimensions (or otherwise have overlapping or nearly overlapping edges). The generic behavior handler 323 can make component B somewhat smaller (also affecting components contained within component B) to provide better differentiation between components A and B.

[0126] Other modifications can include changing colors or fill patterns to create better contrast. For example, component A obscures component B, both of which are painted a similar shade of yellow. Even if component A is made somewhat (or completely) transparent by the transparency handler 321, it is still difficult to see component B. Therefore, the general behavior handler 323 can (temporarily) change the color shades of component A and / or component B to create contrast between them. It will be appreciated that such color / fill pattern modifications may require performing a global analysis of component visibility, obscurance, and geometric relationships to find which colors should be distinguished, based on an algorithm similar to a map coloring algorithm but modified for the website building system component layering space, which is actually three-dimensional and not two-dimensional like a typical map. Such an algorithm can be further modified in that it does not generate arbitrary color assignments (for various components), but rather generates color assignments that attempt to match the original component colors as closely as possible. Additionally, the assignment may take into account that various regions of a single component can have multiple colors or color ranges (e.g., using gradient-based fills or with components that display images). Thus, color assignment may require splitting the component into sub-elements (to support multiple color components) and using an optimization-based graph coloring algorithm that adds a "close to original color" metric to the optimization.

[0127] The general purpose behavior handler 323 can also move components aside to "allow more space" for the area under consideration. This can be combined with dynamic layout processing to better preserve the overall design of the page (e.g., by moving components as needed and moving additional components to preserve the overall design of the page).

[0128] Another change may be a shape modification (e.g., based on modifying the underlying page grid / coordinate system). The general behavior handler 323 can apply shape modifications to the reviewed area to make selection easier and stay in context. This differs from the normal magnification functionality used by UIs (e.g., for the visually impaired) because components are not obscured by the magnified area.

[0129] The generic behavior handler 323 can perform shape modifications based on component definitions provided by the website building system (determined by the component visibility determiner 82), which can include hints on how to render them in a modified way.

[0130] This can be done, for example, by using a "fisheye lens inside photo" correction with non-rectangular pixels to essentially convert the displayed area to use a non-rectangular grid (as shown in Figure 12, to which reference will now be made). An example of the results of such a process can be seen in M.C. Escher's famous painting "The Balcony."

[0131] The general purpose behavior handler 323 can apply automatic zoom or pan to help the user review an area, for example, by zooming and / or panning the view appropriately and focusing on relevant hiding / hidden components.

[0132] It will be appreciated that the component manipulation handler 32 may apply different operations to different parts of a component, for example using different transparencies for different areas.

[0133] It will be appreciated that the system 200 can use expanded frames for its components. For example, instead of displaying only the frame of a hidden or obscured object, the WBS editor 30 can display an expanded frame that includes part of the object's content / fill color / fill pattern to provide more context to the editing user.

[0134] 13, which illustrates a display using an extended frame. As shown, the general behavior handler 323 can replace display A, where a component [y] is hidden under a component [x] with a fill pattern, with display B, where [x] is modified to show only the portion of the fill pattern near its frame, thus exposing component [y]. Such intelligent exposure can span more than one level.

[0135] In an alternative embodiment, the general behavior handler 323 may also clip off portions of text contained within a text component that obscures another component.

[0136] It will be appreciated that system 200 can also support explicitly hidden (ExH) components. ExH components are components that are meant to be hidden during normal site viewing. They may be overlaid based on their z-order value, but are still typically visible during the editing stage. There are two types of such ExH components: administrative-type ExH components, which serve as administrative (rather than visual) functionality, such as DB connectors, event routers, etc., and visual-type ExH components, which are marked as hidden (e.g., through design attributes or procedural actions performed by the page) and remain so at runtime. Such components may be made visible to the end user under special conditions, for example, by actions performed by system 200 as a result of activation by a trigger. These are typically "reserved" components (e.g., popup boxes that are invisible under normal conditions) or alternative design variations or existing components.

[0137] The system 200 can allow an ExH component to have a z-order value even if it is hidden. An activation rule can be "If this ExH component is made visible, then its z-order value is X."

[0138] System 200 can process ExH components in a variety of ways. For example, system 200 can process ExH components as it processes other components (e.g., making them visible based on activation rules as described herein) while remaining invisible during runtime (unless "popped up" during runtime, as described above). It will be appreciated that activation conditions can be configured differently so that ExH components are hidden even when there are no hiding components (e.g., by calling the entire page a "hiding component").

[0139] Alternatively, the system 200 can completely ignore the components of the ExH, ie, not change their visibility (or the visibility of components that overlap them), regardless of the user's actions during editing.

[0140] In alternative embodiments, system 200 may support ExH components that are hidden during editing (e.g., so as not to interfere with the editing phase), but are still visible at runtime and function as normal components at runtime. System 200 may provide additional types of UI to allow components to be toggled in and out of this kind of explicitly hidden state.

[0141] It will also be appreciated that the system 200 can use any of the techniques described above to show components that are "scrolled out" inside their containing container. This is required when a container contains an area larger than its frame, and some of the components with this (regularly invisible) contained area are not visible in normal use unless the user is allowed to "scroll into them." Such scrolling may be geometric scrolling on an "internal surface / page" that is larger than the frame, or may involve scrolling / switching between multiple members of a multiple page container (such as a carousel containing pages with multiple components).

[0142] System 200 may also use dynamic layout anchors (such as those described in U.S. Pat. No. 10,185,703) or semantic relationships (such as those described in U.S. Pat. Nos. 10,176,154 and 9,747,258, entitled "System and Method for the Creation and Use of Visually-Diverse High-Quality Dynamic Layouts," issued August 29, 2017, both of which are assigned to the common assignee of the present invention and incorporated herein by reference), all of the above techniques performed by component manipulation handler 32 to indicate information external to the component or page element. Such relationships are not visible in normal use (as they would violate the WYSIWYG (what you see is what you get) nature of most visual editors.

[0143] The 3D display handler 324 can also use mixed 2D-3D representations, for example, the 3D display handler 324 can convert only the current "hidden" component area into a 3D display sub-area (occupying a portion of the page display) that can be manipulated using 3D operators, which is easier to understand than converting the entire screen into a 3D representation.

[0144] Of course, the component operation handler 32 may use any combination of the functions described herein above.

[0145] It will also be appreciated that system 200 may allow a user to switch between various viewing modes, such that one mode makes it easier to discover overlapping components and another mode is less intrusive, in which the overlapping components are not captured in an editing manner.

[0146] Thus, the system 200 can enable visual editing of website / visual application pages having complex configurations of multiple components based on analysis of component, user, and system data and component relationships, along with activation rules to display hidden / overlapping components accordingly.

[0147] As is evident from the above discussion, unless specifically stated otherwise, throughout this specification discussions using terms such as "processing," "computing," "calculating," "determining," and the like are understood to refer to operations and / or processes of any type of general-purpose computer, such as a client / server system, mobile computing device, smart appliance, or similar electronic computing device that manipulates and / or transforms data represented as physical quantities, such as electronic quantities, in the registers and / or memory of the computing system into other data represented as physical quantities in the memory, registers, or other such information storage, transmission, or display device of the computing system.

[0148] Embodiments of the present invention may include an apparatus for performing the operations described herein. This apparatus may be specially constructed for a desired use, or it may comprise a general-purpose computer or client / server configuration selectively activated or reconfigured by a computer program stored on the computer. The resulting apparatus, when directed by software, can transform a general-purpose computer into elements of the present invention as described herein. The instructions can define a device of the present invention to operate with a desired computer platform. Such a computer program may be stored on any type of computer-readable storage medium, such as a disk, including, but not limited to, optical disks, magneto-optical disks, read-only memory (ROM), volatile and non-volatile memory, random access memory (RAM), electrically programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), magnetic or optical cards, flash memory, disk-on-key, or any other type of medium suitable for storing electronic instructions and capable of being coupled to a computer system bus.

[0149] The processes and displays presented herein are not inherently related to any particular computer or other apparatus. Various general-purpose systems may be used with programs in accordance with the teachings herein, or it may prove convenient to construct more specialized apparatus to perform the desired method. The desired configuration for a variety of these systems will be apparent from the description that follows. Further, embodiments of the present invention are not described with reference to any particular programming language. It will be understood that a variety of programming languages ​​can be used to implement the teachings of the present invention as described herein.

[0150] While certain features of the invention have been illustrated and described herein, many modifications, substitutions, changes, and equivalents will readily occur to those skilled in the art. It is therefore to be understood that the appended claims are intended to cover all such modifications and changes as fall within the true spirit of the invention.

Claims

1. 1. A tool for a visual editor of web pages, the tool being implemented on at least one processor and memory, comprising: The tool may include:

1. A tool comprising: an editor overlap handler that determines display instructions for the visual editor, the web page having a plurality of components, some of which are fully visible normal components and at least one overlapping or visually obscured component (OOVOC), the plurality of components associated with display rules, the display instructions depending on a selected point on the web page, a z-order of the plurality of components, and activation rules associated with components located within a certain proximity to the selected point.

2. The tool of claim 1 , wherein the editor overlap handler adjusts a view of the at least one OOVOC in accordance with the display instructions based on a position of a user's input device that determines the selected point on the web page and at least one of a semantic relationship and a geometric relationship between the regular component and the at least one OOVOC.

3. The tool of claim 1 , wherein the geometric relationship is at least one of a hierarchical, inter-page component association, and overlap magnitude.

4. The tool of claim 1 , further comprising a component manipulation handler that modifies visual attributes of the at least one OOVOC according to the editor overlap handler.

5. The component operation handler: a transparency handler that renders the at least one OOVOC at least one of transparent and translucent; a z-order handler that changes or preserves the z-order between the regular component and the at least one OOVOC of the web page; a generic behavior handler that modifies attributes of the at least one OOVOC according to at least one of a shape change, a zoom, a resize, a move, a clipping, a dynamic layout, a content change, a frame change, a fill change, and a color change; a 3D display handler for converting the at least one OOVOC into a 3D display; a side view handler for cropping and creating a simplified side view of the at least one OOVOC; The tool of claim 4 , comprising at least one of:

6. The tool of claim 2 , wherein the input device is at least one of a mouse, a trackball, a digitizer input device, a physical human motion detector, a biometric parameter reader, a 2D pointing device, and a 3D pointing device.

7. The editor overlap handler: a data collector that collects information about the normal components and the at least one OOVOC from at least one of at least one database and a system external to the tool; a component relationship analyzer for analyzing the at least one semantic and geometric relationship; a component visibility determiner that determines activation conditions from the outputs of the data collector and the component relationship analyzer; The tool of claim 2 , comprising:

8. 1. A method for a visual editor for a web page, comprising: determining display instructions for the visual editor, the web page having a plurality of components, some of which are fully visible normal components and at least one overlapping or visually obscured (OOVOC) component, the plurality of components associated with display rules, the display instructions depending on a selected point on the web page, a z-order of the plurality of components, and activation rules associated with components located within a certain proximity to the selected point; Including, a method.

9. adjusting a view of the at least one OOVOC in accordance with the display instructions based on a position of a user's input device that determines the selected point on the web page and at least one of a semantic and geometric relationship between the conventional component and the at least one OOVOC; The method of claim 8 further comprising:

10. The method of claim 8 , wherein the geometric relationship is at least one of a hierarchical, inter-page component association, and overlap magnitude.

11. The method of claim 8 , further comprising modifying visual attributes of the at least one OOVOC in accordance with the determined display instructions.

12. The modification is rendering the at least one OOVOC at least one of transparent and translucent; modifying or preserving the z-order between the regular components of the web page and the at least one OOVOC; Modifying attributes of the at least one OOVOC according to at least one of reshaping, zooming, resizing, moving, clipping, dynamic layout, content modification, frame modification, fill modification, and color modification; converting the at least one OOVOC into a 3D display; cutting and creating a simplified side view of the at least one OOVOC; 12. The method of claim 11, comprising any one of:

13. 10. The method of claim 9, wherein the input device comprises at least one of a mouse, a trackball, a digitizer input device, a physical human motion detector, a biometric parameter reader, a 2D pointing device, and a 3D pointing device.

14. The adjusting step comprises: collecting information about the general components and the at least one OOVOC from at least one of at least one database and a system external to the visual editor; analyzing at least one of semantic and geometric relationships; determining an activation condition from the output of said collecting and said analyzing; 10. The method of claim 9, comprising:

Images