Comment features for graphic design systems.

Abstract

A computer system and method generates one or more comment features on a canvas, each comment feature carrying at least one comment from a given source. Each comment feature may include a pin component and a comment body element. The pin component is associated with a corresponding location on the canvas. The computer system and method enable a user to move the comment body element around at least an area of ​​the canvas to view at least one comment from the given source while rendering the pin component to match the corresponding associated location on the canvas.

Description

[Technical field]

[0001] This application claims the benefit of priority to each of (i) U.S. patent application Ser. No. 17 / 988,563, filed November 16, 2022, and (ii) Provisional U.S. patent application Ser. No. 63 / 280,140, ​​filed November 16, 2021, the above-mentioned priority applications are incorporated by reference herein in their entireties. [Background technology]

[0002] Software design tools have many forms and applications. In the area of ​​application user interfaces, for example, software design tools require the designer to reconcile the functional aspects of the program with aesthetic and even legal requirements, resulting in a collection of pages that form the application's user interface. For a given application, the designer often has many objectives and requirements that are difficult to keep track of.

[0003] In the field of graphic design, users often create detailed graphic designs that, for example, define the behavior of an application interface. The designs are formed on a canvas and may contain numerous design elements that represent various functional and decorative aspects of the user interface. To comment on design aspects in a meaningful way, users generally need to place their comments near the portions of the design to which the comments pertain. Under traditional approaches, users often provide comments for such graphic designs using text boxes that become part of the graphic design and something that the design user must manually remove before completion. [Brief description of the drawings]

[0004] [Figure 1A] FIG. 1 illustrates an interactive graphic design system for a user's computing device, according to one or more embodiments. [Figure 1B]FIG. 1 illustrates a network computing system for implementing an interactive graphic design system on a user computing device, according to one or more embodiments. [Figure 1C] FIG. 1 illustrates a network computing system for implementing an interactive graphic design system for multiple users in a collaborative environment in accordance with one or more embodiments. [Diagram 2] FIG. 1 illustrates an example method for creating comment features for graphic design, according to one or more embodiments. [Diagram 3] FIG. 1 illustrates a comment component, according to one or more embodiments. [Figure 4A] FIG. 1 illustrates an example interface in which comment features are rendered on a canvas, according to one or more embodiments. [Figure 4B] FIG. 1 illustrates an example interface in which comment features are rendered on a canvas, according to one or more embodiments. [Figure 4C] FIG. 1 illustrates an example interface in which comment features are rendered on a canvas, according to one or more embodiments. [Figure 4D] FIG. 1 illustrates an example interface in which comment features are rendered on a canvas, according to one or more embodiments. [Figure 4E] FIG. 1 illustrates an example interface in which comment features are rendered on a canvas, according to one or more embodiments. [Figure 4F] FIG. 1 illustrates an example interface in which a comment feature is provided that includes content provided by multiple collaborating users, according to one or more embodiments. [Figure 4G] FIG. 1 illustrates an example interface in which a comment feature is provided that includes content provided by multiple collaborating users, according to one or more embodiments. [Figure 4H] FIG. 1 illustrates an example interface in which a comment feature is provided that includes content provided by multiple collaborating users, according to one or more embodiments. [Figure 4I] FIG. 1 illustrates an example interface in which a comment feature is provided that includes content provided by multiple collaborating users, according to one or more embodiments. [Figure 4J] FIG. 1 illustrates an example interface in which a comment feature is provided that includes content provided by multiple collaborating users, according to one or more embodiments. [Figure 4K] FIG. 1 illustrates example clustering comment features, according to one or more embodiments. [Figure 4L] FIG. 13 illustrates an exemplary comments sidebar that may be provided to render comments that appear in a canvas or with respect to a particular design, in accordance with one or more embodiments. [Figure 4M] FIG. 1 illustrates an exemplary simulated (or “prototype”) rendering of a graphic design being edited, along with a comments sidebar, in accordance with one or more embodiments. [Figure 4N] FIG. 1 illustrates an example interface in which a comment feature is provided, according to one or more embodiments. [Diagram 5] FIG. 1 illustrates a computer system upon which one or more embodiments may be implemented. [Figure 6] FIG. 1 illustrates a user computing device for use with one or more instances as described. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0005] A computer system and method generates one or more comment features on a canvas, each comment feature carrying at least one comment from a given source. Each comment feature may include a pin component and a comment body. The pin component is associated with a corresponding location on the canvas. The computer system and method enable a user to move the comment body around at least a region of the canvas to view at least one comment from the given source while rendering the pin component to match the corresponding associated location on the canvas.

[0006] Among the technical advantages, the embodiments as described enable a user to create an interactive and functional comment feature that can be linked to a pin location on a canvas, allowing a reviewer to easily view a comment and the design element or aspect to which the comment pertains. Thus, in examples, a graphic design system is provided that can operate in at least a first mode in which a user can simultaneously interact with the comment feature and the design element of the graphic design. In some examples, a graphic design system is provided that can operate in additional modes, including in a second mode in which all comments can be hidden. Moreover, in examples in which a comment feature is provided on a graphic design, the comment feature is represented by a pin component that can hide the commentary, thereby minimizing the presence of the comment feature.

[0007] Examples further recognize that graphic design is inherently messy. For example, in a collaborative environment, changes made to a graphic design by one user may be difficult to find by another user. Examples provide a graphic design system that displays a comment feature as a pin component, where the comments are not visible, and the visual aspects of the pin component are adjusted to reflect changes related to that comment feature. For example, the pin component for a comment feature may be adjusted to reflect that the comment feature is new, updated, or unresolved. Such visual cues can inform the user of where the user's attention may be needed on the canvas.

[0008] One or more embodiments described herein enable methods, techniques, and actions performed by a computing device to be implemented programmatically, or as computer-implemented methods. As used herein, programmatically means through the use of code or computer-executable instructions. These instructions may be stored in one or more memory resources of a computing device. Programmatically implemented steps may or may not be automated.

[0009] One or more embodiments described herein may be implemented using programmatic modules, engines, or components. A programmatic module, engine, or component may include a program, a subroutine, a portion of a program, or a software or hardware component capable of performing one or more described tasks or functions. As used herein, a module or component may exist on a hardware component independent of other modules or components. Alternatively, a module or component may be a shared element or process of other modules, programs, or machines.

[0010] Some embodiments described herein may require the use of a computing device, including, in general, processing and memory resources. For example, one or more embodiments described herein may be implemented, in whole or in part, on a computing device, such as a server, a desktop computer, a cellular or smartphone, a tablet, a wearable electronic device, a laptop computer, a printer, a digital picture frame, network equipment (e.g., a router), and a tablet device. The memory resources, processing resources, and network resources may all be used in connection with establishing, using, or implementing any embodiment described herein (including in connection with implementing any method or in connection with implementing any system).

[0011] Additionally, one or more of the embodiments described herein may be implemented through the use of instructions executable by one or more processors. These instructions may be carried on a computer-readable medium. The machines illustrated in the figures or described below provide examples of processing resources and computer-readable media on which instructions for implementing embodiments of the invention may be carried and / or executed. In particular, many of the machines illustrated in the figures and embodiments of the invention include a processor(s) and various forms of memory for holding data and instructions. Examples of computer-readable media include persistent memory storage devices, such as hard drives on a personal computer or server. Other examples of computer storage media include portable storage units, such as CD or DVD units, flash memory (such as carried on a smart phone, multifunction device, or tablet), and magnetic memory. Computers, terminals, and network-enabled devices (e.g., mobile devices such as cell phones) are all examples of machines and devices that utilize processors, memory, and instructions stored on a computer-readable medium. Additionally, the embodiments may be implemented in the form of a computer program, or a computer usable carrier medium capable of carrying such a program.

[0012] Graphic Design System

[0013] FIG. 1A illustrates an interactive graphic design system for a user's computing device, according to one or more examples. An interactive graphic design system ("IGDS") 100 may be implemented in any one of a number of different computing environments. For example, in some variations, the IGDS 100 may be implemented as a client-side application executing on the user computing device 10 to provide the functionality described in conjunction with the various examples. In other examples, such as those described in conjunction with FIG. 1B and FIG. 1C, the IGDS 100 may be implemented through the use of a web-based application 80. Additionally or alternatively, as described in conjunction with FIG. 1, the IGDS 100 may be implemented as a distributed system, such that the processes described in conjunction with the various examples execute on a network computer (e.g., a server) and on the user device 10.

[0014] According to the examples, the IGDS 100 may be implemented on a user computing device 10 to enable a corresponding user to design various types of interfaces using graphical elements. The IGDS 100 may include processes that execute as or through a web-based application 80 that is installed on the computing device 10. As illustrated by the various examples, the web-based application 80 may execute scripts, code and / or other logic ("programmatic components") to implement the functionality of the IGDS 100. Additionally, in some variations, the IGDS 100 may be implemented as part of a network service, where the web-based application 80 communicates with one or more remote computers (e.g., servers used for network services) to execute the processes of the IGDS 100.

[0015] In some instances, the web-based application 80 retrieves some or all of the programmatic resources for implementing the IGDS 100 from a network site. Additionally or alternatively, the web-based application 80 may retrieve some or all of the programmatic resources from a local source (e.g., local memory resident with the computing device 10). The web-based application 80 may also access various types of data sets in providing the IGDS 100. The data sets may correspond to files and libraries, which may be stored remotely (e.g., in association with an account, on a server) or locally. The data sets may also include comment records and comment record data stores, as described below.

[0016] In an illustrative example, the web-based application 80 may correspond to a commercially available browser. In such an illustrative example, the IGDS 100 processes may be implemented as scripts and / or other embedded code that the web-based application 80 downloads from a network site. For example, the web-based application 80 may execute code embedded within a web page to implement the IGDS 100 processes. The web-based application 80 may also execute those scripts and retrieve other scripts and programmatic resources (e.g., libraries) from the network site and / or other local or remote locations. As an illustrative example, the web-based application 80 may execute JAVASCRIPT embedded within an HTML resource (e.g., a web page structured according to HTML 5.0 or other versions provided under standards published by the W3C or WHATWG consortium). In some instances, the rendering engine 120 and / or other components may utilize GPU-accelerated logic, such as that provided through a WebGL (Web Graphics Library) program that executes a Graphics Library Shader Language (GLSL) program running on a graphics processing unit (GPU).

[0017] According to the illustrative example, a user of the computing device 10 operates a web-based application 80 to access a network site where programmatic resources are retrieved and executed to implement the IGDS 100. In this manner, the user may initiate a session to implement the IGDS 100 for purposes of creating and / or editing a design interface. In the illustrative example, the IGDS 100 includes a program interface 102, an input interface 118, and a rendering engine 120. The program interface 102 may include one or more processes that execute to access and retrieve the programmatic resources from local and / or remote sources.

[0018] In one implementation, programmatic interface 102 can generate canvas 122 (e.g., an HTML 5.0 canvas) using, for example, programmatic resources associated with web-based application 80. Additionally or alternatively, programmatic interface 102 can trigger or otherwise cause canvas 122 to be generated using programmatic resources and data sets (e.g., canvas parameters) retrieved from a local source (e.g., memory) or a remote source (e.g., from a network service).

[0019] The programmatic interface 102 may also retrieve programmatic resources including an application framework for use with the canvas 122. The application framework may include, for example, a data set that defines or configures a set of interactive graphic tools that integrate with the canvas 122 and comprise the input interface 118 to allow a user to provide input for creating and / or editing a design interface.

[0020] According to some examples, the input interface 118 may be implemented as a functional layer integrated with the canvas 122 to detect and interpret user input. The input interface 118 may, for example, use a reference to the canvas 122 to identify the screen location of a user input (e.g., a "click"). Additionally, the input interface 118 may interpret a user's input actions based on the location of the detected input (e.g., whether the location of the input indicates a selection of a tool, a canvas, or an object rendered on an area of ​​the canvas), the frequency of the detected input in a given time period (e.g., a double click), and / or the start and end locations of an input or series of inputs (e.g., the start and end locations of a click and drag), as well as various other input types (e.g., right click, screen tap, etc.) that a user may specify through one or more input devices. In this manner, the input interface 118 may, for example, interpret a series of inputs as design tool selections (e.g., shape selection based on the location of the input) as well as inputs to define attributes (e.g., dimensions) of the selected shapes.

[0021] Additionally, the program interface 102 may be used to retrieve programmatic resources and data sets, including files 101 that comprise an active workspace for a user, from local or remote sources. The retrieved data sets may include design elements that collectively form a graphic design 125 (or an ongoing design interface). Each file 101 may include one or more DSR representations 111 (denoted as “DSR 111”) that collectively define the graphic design 125. As will be described in more detail with reference to certain examples, the DSR representations 111 may include a document object model (DOM). The files 101 may also include additional data sets associated with the active workspace. For example, as will be described with reference to certain examples, the workspace file may store comment records 133 that may be rendered as comment features 135 by the rendering engine 120.

[0022] In the illustrative example, the rendering engine 120 uses the DSR representation 111 to render a corresponding graphic design 125 on a canvas 122, where the graphic design 125 reflects the design elements and their respective attributes provided with each page of the file 101. A user can edit the graphic design 125 using the input interface 118. Alternatively, the rendering engine 120 can generate a blank page for the canvas 122, and a user can generate the graphic design 125 using the input interface 118. When rendered, the graphic design 125 can include design elements such as a set of objects (e.g., shapes, text, images, programmatic elements), as well as attributes of the individual design elements. Each attribute of a design element can include an attribute type and an attribute value. For objects, the attribute type can include shape, dimension (or size), layer, type, color, line weight, text size, text color, font, and / or other visual characteristics. Depending on the implementation, the attributes reflect the nature of a two-dimensional or three-dimensional design. In this manner, the attribute values ​​of individual objects can define the visual characteristics, for example, size, color, placement, layering, and content, for elements that are rendered as part of the graphic design 125.

[0023] As will be described with some examples, the input interface 118 may also include tools to allow a user to create, update, edit, and / or resolve, delete comment features and records. Comment features may correspond to interactive user interface elements rendered on or across (or with) the canvas 122 to carry and receive user-specified input. Each comment feature may be based on or correspond to a comment record. A comment record may correspond to a structured data set that carries user-specified comments as well as other data sets, such as state values ​​and source identifiers. Comment records associated with or otherwise provided with a graphic design may be stored or maintained with a comment record store.

[0024] According to some examples, the rendering engine 120 executes the comment logic 132 to render interactive comment features 135 on (or across) the canvas 122. Each comment feature 135 can correspond to an interactive element that renders user-specified content and can receive user input (e.g., text input, links, images, reactions, emojis, etc.). Each comment feature 135 can correspond to a comment record 133, which can be stored with the associated file 101. The rendering engine 120 can also enable the comment records 133 to be viewed separately in a structured or tabular format, such as in a comment sidebar 138 adjacent to the canvas 122. A user can interact with design tools in the input interface 118 to create the comment features 135 and corresponding comment records 133. The rendering engine 120 can also implement the comment logic 132 to enable a user to view and update individual comment records 133 through interaction with the corresponding comment features 135. Similarly, the rendering engine 120 can render comment features 135 based on the comment records 133 and according to one or more examples described. With reference to one example of FIG. 1A, the rendering engine 120 can also implement comment logic 132 to retrieve the comment records 133 from a local data store to render the corresponding comment features 135.

[0025] In an illustrative example, the comment feature 135 may be pinned, linked, or otherwise associated with a pin location. The pin location of the comment feature may correspond to a particular design element (e.g., a formatted design element) rendered on the canvas 122. In some implementations, when the comment feature 135 is pinned to a design element, a reference to the comment feature 135 (or corresponding record 133) is generated and associated with a node identifier in the DSR representation 111 that identifies the pinned design element. Thereafter, when the design element is moved or resized, the comment feature may be automatically moved or repositioned to maintain the relative position (or spatial relationship) between the comment feature 135 and the pin location.

[0026] In an example, each comment record 133 includes a source identifier, one or more comments (e.g., text, image data, links, or other content provided by a user), and / or metadata, including an identifier for the author or source of the comment's content, a time stamp when the individual content contribution was made to the comment record 133, and status information indicating whether the comment is resolved / unresolved and / or viewed / unviewed. In some variations, each comment record 133 can identify canvas location data, which identifies a location on the canvas 122 that should be associated with the particular comment. As described with the example, the location of the comment relative to the canvas 122 can correspond to a canvas location (e.g., as identified by XY coordinates), an area of ​​the canvas, or a design element.

[0027] The rendering engine 120 may also implement the comment logic 132 to provide a comment sidebar 138 where comment records 133 may be created, updated and rendered. A user may also interact with the comment sidebar 138 to view, search, sort or filter the comment records 133. In some instances, the comment sidebar 138 is implemented as a mode feature that a user can select / toggle when providing input. The comment sidebar 138 may be toggled to allow a user to provide input that is specified for a comment (or comment record 133).

[0028] Additionally or as a variation, a comments sidebar 138 is provided to allow a user to access and / or update the comment records 133 while simultaneously allowing the user to edit the graphic design 125. In some instances, the comments sidebar 138 may be implemented to have an operational mode such that the information conveyed by the individual comment records 133 can be viewed and acted upon by a user at the same time that the user is able to edit the graphic design 125.

[0029] In the illustrative example, the IGDS 100 operates to implement multiple modes, including a first mode in which a user can view and interact with comment features 135 rendered on the canvas 122 while also interacting with the IGDS 100 to update and edit the graphic design 125. Additionally, additional interactive elements are also enabled to allow the user to create and edit comment features 135. In this manner, a user may have full access to the input interface 118 and functionality of the IGDS 100 (e.g., interactive design tools on the sidebar, canvas tools, etc.) while also allowing the user to utilize the comment functionality of the IGDS 100. Thus, for example, a user may interact with the canvas graphic design 125 to make edits or changes to the graphic design while simultaneously viewing and interacting with the comment features 135.

[0030] Still further, in an example, the IGDS 100 may be operated in alternative modes to facilitate use of comment features. In an example, the rendering engine 120 may implement the comment logic 132 to operate in a first mode in which a user can create and interact with comment features provided on the canvas 122. Additionally, the rendering engine 120 may be implemented in alternative modes, including in a second mode in which the comment features are hidden so as not to cluster the graphic design 125. Still further, in an alternative mode, the rendering engine 120 may be rendered to display comment features that have a particular state, such as comment features that are new (or updated) or unresolved.

[0031] A network computing system for implementing IGDS

[0032] 1B illustrates a network computing system for implementing an interactive graphic design system on a user computing device, according to one or more examples. A network computing system such as that described with one example of FIG. 1B may be implemented using one or more servers that communicate with the user computing device over one or more networks.

[0033] In one example of FIG. 1B , a network computing system 150 performs operations to enable the IGDS 100 to be implemented on a user computing device 10. In a variation, the network computing system 150 provides network services 152 to support use of the IGDS 100 by a user computing device utilizing a browser or other web-based application. The network computing system 150 may include a site manager 158 for managing a website in which a set of web resources 155 (e.g., web pages) are made available for site visitors. The web resources 155 may include instructions, such as scripts or other logic ("IGDS instructions 157"), that are executable by a browser or web component of the user computing device.

[0034] In some variations, when computing device 10 accesses and downloads web resource 155, web-based application 80 executes IGDS instructions 157 to implement functionality as described with respect to some illustrative examples of FIGURE 1A. For example, IGDS instructions 157 may be executed by web-based application 80 to start program interface 102 on user computing device 10. The start-up of program interface 102 may coincide with, for example, the establishment of a web socket connection between program interface 102 and service component 160 of network computing system 150.

[0035] In some instances, the web resources 155 include logic that the web-based application 80 executes to initiate one or more processes of the program interface 102, causing the IGDS 100 to retrieve additional programmatic resources and data sets to implement the functionality as described by the instances. The web resources 155 can, for example, embed logic (e.g., JAVASCRIPT code), including GPU accelerated logic, in an HTML page for download by the user's computing device. The program interface 102 can be triggered to retrieve additional programmatic resources and data sets, for example, from the network services 152 and / or from local resources of the computing device 10, to implement the IGDS 100. For example, some of the components of the IGDS 100 can be implemented through web pages that can be downloaded onto the computing device 10 after authentication is performed and / or when the user performs additional actions (e.g., downloading one or more pages of a workspace associated with an account identifier). Thus, in the illustrated example, the network computing system 150 can communicate the IGDS instructions 157 to the computing device 10 through a combination of network communications, including through a download activity of the Web-based application 80, where the IGDS instructions 157 are received and executed by the Web-based application 80.

[0036] Computing device 10 may use web-based application 80 to access a website of network service 152 to download web pages or web resources. Upon accessing the website, web-based application 80 may communicate an account identifier to service component 160 automatically (e.g., through stored credentials) or through manual entry. In some instances, web-based application 80 may also communicate one or more additional identifiers that correlate to the user identifier.

[0037] Further, in some instances, the service component 160 can use a user or account identifier to retrieve profile information 109 from a user profile store 166. Additionally or as a variation, profile information 109 for a user can be determined and stored locally on the user's computing device.

[0038] The service component 160 can also retrieve from the file store 164 an active workspace file ("active workspace file 163") linked to a user account or identifier. The profile store 166 can also identify workspaces identified by accounts and / or users, and the file store 164 can store data sets that comprise the workspaces. The data sets stored with the file store 164 can include, for example, data sets identifying pages of the workspace, constraints for the active set of workspace files, and one or more data structure representations 161 for the design being edited that can be rendered from the respective active workspace files.

[0039] Further, in the illustrative example, the services component 160 provides a representation 159 of a workspace associated with the user to the web-based application 80, which representation identifies, for example, individual files associated with the user and / or user account. The workspace representation 159 may be in the form of, for example, a Document Object Model (DOM) representation 111. The representation 159 may identify a set of files, each file including one or more pages, and each page including objects that are part of a design interface.

[0040] On the user device 10, the user can view the workspace representation through a web-based application 80, and the user can choose to open a workspace file through the web-based application 80. In an illustrative example, when the user chooses to open one of the active workspace files 163, the web-based application 80 launches a canvas 122. For example, the IGDS 100 can launch an HTML 5.0 canvas as a component of the web-based application 80, and the rendering engine 120 can access the DSR 111 of the graphic design 125 to render the corresponding graphic design 125 on the canvas 122.

[0041] 1B , the rendering engine 120 implements comment logic 132 to access and render comment records 133 and comment features 135 as part of an online design environment. For example, the comment records 133 may be retrieved from a remote source (including a third-party site) to render the comment features 135 along with the graphic design 125, for example.

[0042] Collaborative Network Platform

[0043] FIG. 1C illustrates a network computing system for implementing an interactive graphic design system for multiple users in a collaborative environment, according to one or more embodiments. In one example of FIG. 1C, a collaborative network platform is implemented by a network computing system 150 that communicates with multiple user computing devices 10, 12 across one or more networks (e.g., the World Wide Web) to implement the IGDS 100 on each of the multiple computing devices 10, 12. While FIG. 1C illustrates one example in which two users utilize the collaborative network platform, the illustrated example contemplates a network computing system 150 that would enable collaboration on design interfaces among a larger group of users.

[0044] 1C, the user computing devices 10, 12 may be assumed to be operated by users associated with a common account, with each user computing device 10, 12 implementing a corresponding IGDS 100 to access the same workspace during respective sessions that overlap with one another. Thus, each of the user computing devices 10, 12 may access the same set of active workspace files 163 simultaneously, and the respective program interfaces 102 of the IGDSs 100 on each user computing device 10, 12 operate to establish a corresponding communication channel (e.g., a web socket connection) with the service component 160.

[0045] In an illustrative example, the service component 160 can communicate a copy of the active workspace file 163 to each user computing device 10, 12 such that the computing devices 10, 12 simultaneously render the graphic designs 125 in the active workspace file 163. Additionally, each of the computing devices 10, 12 can maintain a local DSR representation 111 of the respective graphic designs 125 as determined from the active workspace file 163. The service component 160 can also maintain a network side data structure representation 161 obtained from the active workspace file 163 and consistent with the local data structure representation 111 on each of the computing devices 10, 12.

[0046] The network computing system 150 can continuously synchronize the active workspace files 163 on each of the user computing devices. In particular, changes made by a user to the graphic design 125 on one computing device 10, 12 can be immediately reflected on the rendered graphic design 125 on the other user computing device 10, 12. Illustratively, a user of a computing device 10, 12 can make changes to the respective graphic design 125, and the respective rendering engines 120 can implement the reflected updates in their local copies of the DSR representation 111. From the computing device 10, the program interface 102 of the IGDS 100 can stream change data 121 reflecting the user input changes to the service component 160. The service component 160 processes the change data 121 for the user computing device. The service component 160 can use the change data 121 to make corresponding changes to the network side data structure representation 161. The service component 160 can also stream remotely generated change data 171 (which in the provided example corresponds to or reflects the change data 121 received from the user device 10) to the computing device 12 to cause the corresponding IGDS 100 to update the graphic design 125 rendered on that device. The computing device 12 can also use the remotely generated change data 171 to update with its local data structure representation 111. The program interface 102 of the computing device 12 can receive updates from the network computing system 150 and the rendering engine 120 can update the graphic design 125 and its respective local copies of the DSR representation 111 of the computing device 12.

[0047] The reverse process may also be implemented to update the data structure representation 161 of the network computing system 150 with change data 121 communicated from the second computing device 12 (e.g., corresponding to a user of the second computing device updating the graphic design 125 rendered on the second computing device 12). The network computing system 150 may then stream remotely generated change data 171 (which in the provided example corresponds to or reflects the change data 121 received from the user device 12) to update the local DSR representation 111 of the graphic design 125 on the first computing device 10. In this manner, the graphic design 125 of the first computing device 10 may be updated in response to a user of the second computing device 12 providing user input to modify the graphic design 125.

[0048] To facilitate synchronization of the DSR representations 111, 111 on the computing devices 10, 12, the network computing system 150 implements stream connectors to merge data streams exchanged between the first computing device 10 and the network computing system 150, and between the second computing device 12 and the network computing system 150. In some implementations, the stream connectors may be implemented to allow each computing device 10, 12 to make changes to the network-side data representation 161 without additional data duplication that may possibly be required to process the streams from each device separately.

[0049] Additionally, over time, one or both of the computing devices 10, 12 may become out of sync with the server-side data representation 161. In such an event, each computing device 10, 12 may re-download the active workspace file 163 in order to resume maintaining it of the data structure representation of the graphic design 125 being rendered and edited on that device.

[0050] Synchronizing comment features and records

[0051] In some implementations, the rendering engine 120 implements the comment logic 132 to render the comment records 133 and features 135 and to synchronize the creation / modification of the comment records 133 and features 135 among collaborating users. For example, the comment features 135 may be referenced in the DSR representation 111 along with the design element to which the comment is pinned. Changes to the comment features 135 (and corresponding comment records 133) may be synchronized through synchronization with the DSR representation 111, as described with some examples.

[0052] Referring to one example of FIG. 1C , comment records 133 and features 135 can have multiple authors in a collaborative environment. For example, in an online collaborative session, multiple users can provide comments to a comment feature 135 associated with a design element, and those users can generate and / or update the comments carried by the comment feature. Each comment record 133 and feature 135 can be used to carry a messaging thread that includes contributions by multiple users of the collaborative environment. In this manner, each comment feature 135 allows a user to provide feedback and input while focusing the user's attention on a particular portion of a design element or canvas. In such an example, a series of comments, or a sequence of comments, can be structured as a thread. The rendering engine 120 can implement the comment logic 132 to link or otherwise structure comment records 133 that are inferred or otherwise indicated as being part of a common thread (e.g., a comment that is a response to another comment). In some variations, a comment thread can be implemented by updating individual comment records 133 to include comments from multiple users.

[0053] In a collaborative environment, the comment feature and the corresponding comment record 133 may include state information (e.g., relevance, whether the comment record 133 has been "read"). Additionally, in some instances, some of the state information may be specific to individual users of a collaborative session. For example, the state information may be specific to a particular viewer and indicate whether that viewer has previously opened the comment feature 135 or the corresponding record 133. Additionally or alternatively, the state information may indicate whether the comment feature 135 and record 133 have been resolved. In a collaborative environment, variations in the state data may be reflected by visually adjusting the appearance of the comment feature (e.g., pin component 408 (see FIGS. 4A-4J)). In this manner, a user may easily identify a comment feature 135 requiring user attention, where input is provided by another user.

[0054] Comment feature clustering

[0055] 1A-1C, the rendering engine 120 can implement the comment logic 132 to render the comment features 135 in a cluster. In particular, the illustration provides for the comment features 135 to be clustered when a condition is met with respect to the associated pin locations of the comment features 135 being considered as duplicates. When clustered, the rendering engine 120 can generate an alternative comment cluster element 139, which indicates information about the underlying comment features 135 and the associated comment records 133. For example, the alternative cluster element 139 can include information such as the number of comment features in the cluster, the number of open or new comments in the cluster, the number of sources behind the cluster, and / or information about the most recently updated comment features.

[0056] In an illustrative example, the determination that a comment feature 135 should be represented by a cluster element 139 may be based in part on the relative display arrangement of the comment features 135. The display arrangement 139 may be based on the zoom level of the respective user computing device 10, 12. Thus, the determination that multiple comment features 135 should be represented by cluster elements 139 may be based on whether the arrangement of the comment features 135 at a selected zoom level is separated by a display distance less than a threshold. In such a case, the multiple comment features 135 are said to satisfy an overlap condition, and the rendering engine 120 represents the multiple comment features 135 as clustered elements 139.

[0057] In an illustrative example, the overlap condition may be based on a visual separation between the pin locations of the comment features being clustered, where the visual separation reflects screen distance. For example, if the visual separation between two or more comment features 135 is less than a specified threshold, the rendering engine 120 renders the comment features 135 as cluster elements 139. Because the display area of ​​each user computing device reflects user-specific magnification parameters, the selection of comment features 135 for rendering in cluster form may be dynamically determined for each individual user based on the respective user magnification settings. Thus, the user's zoom level may dynamically vary the cluster elements, including the number of comment features 135 represented by the cluster elements and / or state information indicated by the cluster elements 139. Similarly, the rendering engine 120 may dynamically eliminate cluster elements 139 when the zoom level is sufficiently magnified.

[0058] As an example, for a given user who is “zoomed out,” a given display area (e.g., a threshold display area) may encompass a larger number of pin locations with associated comment records 133. In such a case, the rendering engine 120 may display the corresponding comment features as corresponding clustered elements 139, where the comment features 135 are displayed in groups on the display area of ​​the canvas at the selected zoom level.

[0059] Conversely, in the case of another user who has been “zoomed in,” a given viewing area may encompass only one pin location associated with a comment feature 135. In such a case, a portion of the canvas 122 may include a single comment feature 135.

[0060] methodology

[0061] FIG. 2 illustrates an example method for creating comment features for graphic design, according to one or more embodiments. A method as described in conjunction with one example of FIG. 2 may be implemented using a system as described in conjunction with the examples of FIGS. 1A-1C. Accordingly, reference may be made to elements of FIGS. 1A-1C to illustrate components for implementing the described steps or sub-steps. Additionally, in describing the example of FIG. 2, reference is made to FIGS. 4A-4J to illustrate example comment features, according to one or more embodiments.

[0062] 2, in step 210, the IGDS 100 generates one or more comment features 410 for the graphic design 425, which is rendered on the canvas 402. Each comment feature 410 may be generated by a user operating a corresponding computing device 10, 12. In the collaborative environment, a user may view the graphic design 425 and comments regarding particular aspects of the graphic design (e.g., attributes of stylized elements).

[0063] In step 220, the IGDS 100 associates or otherwise links each comment feature 410 to a pin location on the canvas 402. In an illustrative example, the pin location may correspond to a coordinate (or set of coordinates) on the canvas 402. In a variation (see step 224), the pin location may correspond to a design element. Still further, the pin location may correspond to an area of ​​the canvas 402 (see, for example, FIG. 4N).

[0064] As will be described with some examples, the renderable elements of a comment feature 410 include a pin component 408 (see FIGS. 4A-4J) and a comment body element 418 (see FIGS. 4A-4J). When a comment feature 410 is created, the pin component 408 may be rendered on (or across) the canvas 402 at a location determined by the pin location.

[0065] In an example, step 224 may provide a pin location to correspond to a design element. A user may provide input specifying a pin location of the comment feature 410 to be a formatted element. For example, a user may choose to insert a comment to provide feedback (e.g., for the designer) regarding a particular design element of the graphic design 425. A user may interact with the IGDS 100 to specify a particular design element (e.g., a user enters separate commands to select a formatted design element and to create a comment). In response, the IGDS 100 creates a new comment feature 410 on the canvas 402, and the newly created comment feature 410 is linked to the particular design element of the user input. Additionally, in an example, a pin component 408 may be rendered over or near the formatted element or frame linked to the comment feature 410. As will be further explained with reference to examples, the comment body element 418 of the comment feature 410 may be adjacent to, hidden from, or separate from the pin location, depending on the implementation, configuration, or user input.

[0066] In step 230, the comment feature 410 is rendered on the canvas 402 along with the graphic design 425. In the example, the comment feature 410 may be rendered in a closed state and an open state. In the closed state, the pin component 408 may be rendered on the canvas 402 without the comment body element 418. In the open state, the comment body element 418 may be rendered on the canvas 402 along with the graphic design 425. In both the open and closed states, the example provides for the pin component 408 to be rendered in a specified proximity or position relative to the linked design element 409.

[0067] In step 240, the IGDS 100 allows the user to manipulate the rendering, including allowing the user to manipulate one or more attributes of the linked design element 409 while maintaining the relative position of at least a portion of the comment feature with respect to the shape element. In some instances, the pin component 408 of the comment feature 410 may be moved or repositioned to maintain its positional relationship to the linked design element. In some variations, the comment body element 418 may also be repositioned based on the design element 409 being moved or resized.

[0068] Additionally or alternatively, the IGDS 100 may enable a user to interact with the comment features 410 (e.g., with the comment body element 418) to enable the user to update the graphic design 425 on the canvas 402. For example, the user may open and position (and reposition) the comment body element 418 across the canvas while editing the graphic design 425 using the tools and functionality of the IGDS 100. Interaction between the user and the comment body element 418 may include viewing and editing comments, adding new comments, reacting to and interacting with problem-solving features (e.g., check marks), dismissing comments, etc. In some instances, the IGDS 100 may include an alternative mode implementation, an incoming comment design mode, in which the user may interact with the comment features and with tools and functionality to update the graphic design 425.

[0069] Comment Component

[0070] FIG. 3 illustrates a comment component, according to one or more embodiments. The comment component 300, as described in conjunction with one example of FIG. 3, may represent components and processes of the IGDS 100 that implement the comment logic 132. Thus, in an example, the comment component 300 may be implemented by the rendering engine 120 (or another component of the IGDS 100) that executes the comment logic 132, as described in the examples of FIGS. 1A-1C. Additionally, for purposes of illustration, reference may be made to elements described in conjunction with FIGS. 4A-4J.

[0071] Referring to FIG. 3, the comment component 300 implements a process for providing one or more input interfaces 310 to enable a user to create and interact with a comment feature 330 of a graphic design. As will be described with other examples, the comment feature 330 includes a user-interactive feature that conveys and shows comments about aspects of the rendered graphic design, i.e., content entered by an individual user. Using the input interface 310, a user can create a new comment feature 330 for the graphic design by specifying a corresponding input 311. Additionally, the input 311 can specify a pin location 313 for the comment. In some examples, the pin location 313 identifies a graphic element (e.g., a shaped element, a frame component, etc.) or a portion thereof. For example, a user can create a comment by selecting a shaped element rendered on the canvas 122 and using a toolbar as a dedicated input mechanism for creating a new comment that is pinned to the shaped element. When the pin location 313 corresponds to a design element, the comment renderer 320 can map the user-selected location to the design element, for example, using a hierarchical representation of the graphic design 125. In some variations, the comment renderer 320 accesses the DOM representation to identify a top-level node (e.g., a top-level node that is not a page node) that corresponds to the location specified by the input. Then, when the design element at the pinned location is moved or resized on the canvas, the comment is moved and repositioned as well.

[0072] Additionally or alternatively, the pin location 313 may specify a canvas location (e.g., an X, Y coordinate recorded on the canvas 122). As yet another alternative, the pin location may specify an area of ​​the canvas 122, such as an area that contains multiple design elements.

[0073] Create a new comment

[0074] In response to a new comment input 311, the comment component 300 implements a process represented by record manager 316 to create a new comment record 323 stored in a comment record store 325 in association with the corresponding graphic design 125 rendered on the canvas 122. The comment record store 325 may represent a data structure that stores the comment records 323 for the newly created store. Additional comment features 330 and corresponding records 325 may be created and rendered by one or more users (e.g., in a collaborative environment), resulting in multiple comment records 323 stored with the comment record store 325. In this manner, each rendered comment on the graphic design 125 may include a corresponding comment record 323 stored as part of the comment record store 325.

[0075] Additionally, in response to a new comment entry 311, a comment rendering process 320 renders a new corresponding comment feature 330 along with the graphic design 125. As will be illustrated, the comment feature 330 is interactive and can be positioned on or across the canvas 122 at a position based on a specified pin location 313. The comment record 323 can also be viewed through a dedicated comment interface that is separate from the canvas 122.

[0076] According to some instances, the comment feature 330 is generated to include a pin element 322 and a comment body element 324. Depending on the implementation, the pin element 322 may be positioned adjacent to, near, or across the pin location 313. For example, a set of placement rules may be utilized to determine the position of the pin element 322 relative to the corresponding pin location 313 specified by user input. For example, the pin element 322 may be spaced apart from the pin location 313 by either (i) a fixed or dynamic distance (e.g., the number of pixels separating the reference point of the pin element 322 from the pin location 313) measured relative to the canvas 122, and / or (ii) a visual distance that may be dynamically determined based in part on the user's zoom level.

[0077] In an illustrative example, the comment body element 324 can be interactive and form part of the input interface for that particular comment. An initial user can create a comment feature 330 by specifying a pin location 313 and interacting with the comment body element 324 to provide input (e.g., a comment, a reaction input, an emoji, a link, an image, etc.). The comment rendering 320 can then render the comment feature 330 with the comment body element 324 containing the user-specified content. The comment body element 324 can be implemented as an element that can be rendered in a closed state, opened, and interacted with when opened. When the comment feature is opened, other users can, for example, interact with the comment body element 324 to generate additional comments, respond to existing comments, react to comments (e.g., specifying emojis), navigate comments (e.g., scrolling or searching within the comment body element 324), or perform other functions. Still further, in some implementations, the comment body element 324 can carry a thread of messages that users exchange.

[0078] Update your comments

[0079] When implemented in a collaborative environment, multiple users can contribute content conveyed by the comment body elements 324 of individual comment features 330. The comment input interface 310 can include a process for detecting interaction with the comment body elements 324 of each comment feature 330. When further interaction is detected, either by the original user who created the content or by another user, the input interface 310 can update the corresponding comment record 323 to reflect the additional input. Additionally, the comment rendering 320 can update the rendering of the comment feature 330 where the input was received.

[0080] As an example, a first user (e.g., a reviewer) can generate a comment feature to provide feedback for a particular design element or aspect of the graphic design. A second user (e.g., a design user) can implement feedback suggestions that are communicated through the comment body element 324 of the comment feature 330. Alternatively, the second user (e.g., the design user or another reviewer) can respond to the feedback by providing content of their own. In some variations, the comment feature 330 can include a resolution input mechanism that allows any user to respond to a comment by indicating that the issue raised by the comment has been resolved. Depending on the implementation, the problem resolution mechanism can correspond to, for example, a checkmark feature that a responding user can click to communicate a resolution. Additionally or as a variation, the problem resolution mechanism can include a dismiss or question feature or other shortcut input that designates a particular category of response.

[0081] Comment Activity Monitoring

[0082] In some instances, the comment component 300 can implement a process represented by a comment activity monitor 336 to track and communicate information related to events that occur with respect to each comment feature 330 or record 323. The activity monitor 336 can record such event information for each comment feature 330 along with the corresponding comment record 323. In some instances, each comment record 323 can be associated with one or more state values ​​that reflect different types of events that can occur with respect to a given comment.

[0083] In some instances, a comment (i.e., content entered by a user through the comment body element 324 of the comment feature) may be categorized or otherwise assumed (e.g., by user input) to be a problem. The activity monitor 336 may identify the problem resolution state of the corresponding comment record 323 as unresolved. When a subsequent user input is received, by the same or a different user, the problem resolution state may be changed in state to reflect resolution ("resolved"). In a variation, the determination of whether the problem has been resolved may be based on the type of input subsequently received. For example, a subsequent user may specify an input indicating that the problem has been resolved. Alternatively, the determination of whether the problem has been resolved may be based in part on whether a user identified in a prior comment subsequently provided an input for the comment body element 324 and / or a particular type or kind of input (e.g., a user clicked a check mark or specified the term "resolved"). When the comment body element 324 of a comment feature 330 includes multiple comments, the activity monitor 336 can identify multiple issues for resolution. For example, the comment body element 324 can be structured to allow a comment user to designate or indicate their respective comment as being an issue. The activity monitor 336 can maintain an issue resolution status for each comment, or alternatively for the corresponding comment record 323 of each comment feature 330. In the latter case, the comment record 323 can reflect an unresolved state when only one issue remains unresolved.

[0084] The comment rendering 320 can render the comment feature 330 on the canvas in alternative viewing states. In some instances, the comment rendering 320 renders the comment feature 330 in a closed and an open state. In the closed state, the comment feature 330 can appear as a pin component 322 such that the comment body element 324 is either not visible or is minimized. A user can interact with the pin component 322 to open or view the comment body element 324. For example, a user can choose to preview the contents of the comment body element 324 (e.g., a view-only mode) or open the comment body element 324 and interact with it (e.g., leave a reply to a comment, respond to an existing comment, check it, etc.).

[0085] Further, in an example, the comment body element 324 can be moved in response to user input while the comment feature 330 is in an open state. In such an example, a user can move the comment feature to a particular location on the canvas 122 without changing the pin location or moving the pin component 322. In such an example, a user can move the comment body element 324 to a position on the canvas that is most convenient, such as directly adjacent to a design element specified by the content of the comment body element 324. This allows a user to make edits to the graphic while viewing the identified or associated design element of the comment.

[0086] Additionally, in some instances, the comments component 300 can implement a comment design mode that allows the user to view and interact with the comment features 330 while the comment rendering 320 also allows the user to simultaneously edit or update the graphic design 125 on the canvas 122. In the comment design mode, the user can have full access to the design tools and functionality of the IGDS 100. Thus, the user can interact with the comment features 330 (e.g., open and view the comment body element 324, move the comment body element 324 around the canvas) while also allowing the user to make edits to the graphic design 125. In this way, the user's attention can remain on the canvas 122 at the exact location relevant to the task that may be identified by the comment in the comment body element 324. In a variation, the comments component 300 may have the comments rendering 320 toggled to hide the comments feature, which may allow users to view and edit / update the graphic design 125 without the comments feature cluttering their view of the graphic design 125.

[0087] In a collaborative environment, the comment component 300 may be implemented in a mode designated by a given user, such that each user can implement a desired comment design mode for collaborating on the graphic design 125.

[0088] Additionally, in some instances, when a new comment is created, the corresponding comment record 323 may record the viewed state of the comment feature 330. The activity monitor 336 may record when a user views the corresponding comment body element 324 to view and interact with one or more comments. The activity monitor 336 may update the viewed state of the comment record 323, for example, to viewed, to reflect that the user has opened the comment body element 324. Additionally, the activity monitor 336 may record an identifier of the user who viewed the comment, such that the viewed state of the comment may be user specific. When that user opens the comment body element 324, the activity monitor 336 may change the state associated with the comment to viewed. However, when another user adds a comment to the comment body element 324, the activity monitor 336 may record the event by again changing the state of the comment record to reflect that there is unviewed content with the comment feature 330. Additionally, the corresponding comment record 323 may be updated to reflect the newly entered comment.

[0089] Further, in some instances, the activity monitor 336 associates each comment record 323 with a user identifier for each user who provided a comment for the corresponding comment feature. In some implementations, each user identifier is associated with a user profile, which may include a profile picture, a name, or other identifier (such as a nickname).

[0090] The comment rendering 320 can render information to represent events occurring with respect to individual comment features 330. The comment rendering 320 can selectively render each comment feature 330 to indicate, for example, the source of each comment (e.g., the user or author who provided the comment), the number of comments (or alternatively unresolved comments) associated with each comment feature, and / or an identifier of the last person who provided a comment (or unresolved comment). Illustratively, the comment rendering 320 can render the comment features 330 to include numbers reflecting the commentator, the number of comments, and / or the number of unresolved issues. Illustratively, the comment features 330 can render the pin component 322 and / or the comment body element 324 (in a closed state) to reflect the number of commentators, the number of unresolved issues, and / or the last issue. Additionally, the comment rendering 320 can render the comment features 330 to reflect state information, such as whether the comment feature is comment or unresolved, or whether the comment body element 324 carries a new comment that is unviewed. When the comment body element 324 is opened, the various comments are rendered along with an indicator of, for example, the source (or author) of the comment, a timestamp of when the comment was made, and other information.

[0091] In some instances, the comment rendering 320 may also generate cluster elements in place of the comment features 330 based on the zoom level and / or relative placement of the comment features 330 with respect to the display area. If the comment features 330 are deemed to be within sufficient viewing distance of each other, the comment rendering 320 may generate cluster elements 326 in place of the clustered comment features 330. To view the comment features, the user may zoom in or, alternatively, select a cluster element to view its components. In some instances, the input interface 310 may also respond to a viewing input that adjusts the zoom level by dynamically generating and adjusting cluster elements that reflect the number of comment features 330 provided with the clustered elements. Other information that may be provided may include, for example, information regarding the source (e.g., author) of the comment features and the state of the comment features, either individually or as a whole.

[0092] Comment Features Examples

[0093] 4A-4E illustrate an example interface in which a comment feature is rendered on a canvas, according to one or more embodiments. FIGs. 4F-4J illustrate an example interface in which another example comment feature is provided, including content provided by multiple collaborating users, according to one or more embodiments. FIG. 4K illustrates an implementation of a clustered comment feature, according to one or more embodiments. FIG. 4L illustrates a comment sidebar that may be provided to render comments appearing in a canvas or with respect to a particular design, according to one or more embodiments. FIG. 4M illustrates a simulated (or "prototype") rendering of a graphic design being edited, along with a comment sidebar, according to one or more embodiments. In describing the examples of FIGs. 4A-4M, reference is made to elements of FIGs. 1A-1C and 3 to illustrate suitable components for providing the described functionality.

[0094] With reference to FIG. 4A, the interface 400 includes a canvas 402 on which a graphic design 425 is provided. The graphic interface 425 may be created by one or more users operating the computing devices 10, 12 utilizing an interactive graphic design system such as that described in conjunction with FIGS. 1A-1C. In such a collaborative environment, individual users operating the computing devices 10, 12 may view and comment on aspects of the graphic design 425, for example, by (i) creating new comment features and / or (ii) interacting with an existing comment feature(s) (including comment features created by other users). The graphic design 425 may include multiple design elements (e.g., shaped elements), each with a corresponding set of attributes (e.g., text, content, shape, etc.). In one illustrated example, a pin component 408 of the comment feature 410 is provided on the canvas 402. The pin component 408 may be associated or linked to a pin location, such as a design element 409. When the design element 409 is moved or resized, the pin component 408 may also be moved to maintain the relative placement between the pin component 408 and the linked design element 409. Additionally, the pin component 408 indicates the presence of comments that the user can view. The pin component 408 may include attributes that indicate the source (or author) or other information about the comment conveyed by the comment feature 410. In one example shown, the pin component 408 includes an avatar or other identifier for the comment conveyed by the comment feature 410.

[0095] The interface 400 may include design tools (not shown) to enable a user to create and edit design elements, as well as comment features. Additionally, as shown, the interface 400 may, in some instances, display a DSR representation 405 of a graphic design 425 in which a comment feature 410 is identified in association with the design element of the pin location.

[0096] 4B shows an expanded and isolated view of the pin component 408 of FIG. 4A. The pin component 408 of the comment feature 410 may be associated with a pin location (e.g., a design element on the canvas 402), which may be specified (at least initially) by the commentator. The pin component 408 may be shaped to visually indicate the associated pin location of the comment feature 410. For example, the corners 413 of the pin component 408 may be tapered or pointed to indicate a particular pin location. In some variations, the pin location of the pin component 408 may be moved by input from a collaborator.

[0097] In an illustrative example, the pin component 408 includes multiple configurable elements for indicating additional information about the comment feature. For example, the pin component 408 can include a source identifier 415 (e.g., an avatar) for indicating the author of the comment included in the comment feature. Additionally or alternatively, the source identifier can represent the author of the most recent comment or the oldest unread comment.

[0098] In a collaborative environment, some instances provide a source indicator 415 that can show a visual identifier (e.g., a photographic image, an avatar) for one or more users collaborating on a design rendered on the canvas 402. In this manner, the source identifier 415 communicates to the user an identifier regarding the author or source of the comment conveyed by the comment feature 410. Additionally, the visual source indicator 415 can take into account users who responded to content in the comment body element 418 (see FIGS. 4C-4E) of a particular comment feature 410. In some implementations, the comment feature 410 can convey comments from multiple users (e.g., from multiple underlying records 133, from a thread with comments from multiple users, etc.), in which case the pin component 408 can include a source identifier 415 that identifies the multiple sources. For example, the source identifier 415 may identify a single commentator in the comment feature 410 using a corresponding user identifier (e.g., a profile picture) or may identify multiple commentators by displaying multiple identifiers, each identifier representing a corresponding author of one of the comments conveyed in the comment body element 418. Still further, in other variations, the pin component 408 may include a number to indicate the number of comments or sources of comments conveyed by the comment feature 410.

[0099] Further, in the illustrated example, the pin component 408 may use highlighting, shading, or other visual cues (e.g., modulation elements) to indicate a status indicator, which indicates a corresponding status of the comment feature 410. The status of the comment feature 410 may include, for example, a view state, a resolved state, and / or a selected state. The view state may reflect whether a user has opened or previewed the comment body element of the comment feature 410. The resolved state may reflect whether an issue raised by a comment carried with the comment feature has been resolved. The selected state may correspond to whether a user has selected to view or preview the comment body of the comment feature 410.

[0100] The status indicators, source indicator 415 and other indicators of the pin component 408 allow a user to view information about the comment feature 410 (e.g., view state, resolution state, etc.) while the comment feature 410 is maintained in a minimal state on the canvas 402. In the minimal state, for example, the comment feature 410 is rendered without the comment body element 418 (see FIGS. 4C-4E). In some instances, the pin component 408 can provide a view state indicator 414, for example, in the form of a ring, banner, or other element integrated with or associated with the pin component 408. In a collaborative implementation, the view state can be specific to an individual user, meaning that each user viewing the canvas 402 is provided with the comment feature 410 along with a view state indicator that indicates whether the particular user has previously opened, viewed, or read the corresponding comment body. In a variation, the view state indicator 414 can reflect a view state that is the same for all users of the canvas 402. In such a case, when a user views, previews, or opens a comment body element 418 of a comment feature 410, the view state indicator 414 changes to reflect that the comment body element 418 has previously been opened, viewed, or read, for all users.

[0101] Additionally or as a variation, in an example, the view state indicator 414 can indicate whether the comments feature 410 has been updated since a previous instance when the comments feature was rendered as read or resolved. In some variations, a user's interaction with the comments feature 410 can be reflected by the view state indicator 414, particularly as rendered on the computing devices of the interacting users. Thus, in a collaborative environment, the comments feature 410 can be rendered on one user's computing device such that the view state indicator 414 reflects a read state, while the comments feature 410 is rendered in an unread state for other users. While some examples provide the view state indicator 414 to indicate a binary state value (viewed, unviewed), in variations, the view state indicator can indicate additional states, such as (i) an unresolved state, where, for example, a user has viewed and responded to a comment, and (ii) a partially viewed state, where the view state indicator 414 indicates that the content of the comments feature has not been viewed by one or more users collaborating on a design.

[0102] In an illustrative example, as related to the viewing state indicator 414, a user may provide one or more types of input to open, view, or read the comment body 418 of a comment feature 410. The user may provide a first input (e.g., a left click) to open the comment body element 418, which will cause the viewing state of the comment feature 410 to reflect the comment feature (or the underlying comment record represented by the comment feature 410) as being "read." In addition or as a variation, the user may provide a second input (a right click) to render content from the comment body element 418 while maintaining or changing the viewing state of the comment feature 410 to "unread."

[0103] Additionally, the source indicator 415 of the comment feature 410 can indicate the source of the comment record 133(s) indicated by the comment feature. In a collaborative environment, the source indicator 415 can indicate a visual identifier (e.g., a photographic image, an avatar) for one or more users collaborating on a design rendered on the canvas 402. In this manner, the source identifier 415 communicates to the user an identifier regarding the author or source of the comment carried by the comment feature 410. Additionally, the visual source indicator 415 can take into account users who responded to content in the comment body element 418 of a particular comment feature 410. In some implementations, the comment feature 410 can carry comments from multiple users (e.g., from multiple underlying records 133, from a thread with comments from multiple users, etc.), in which case the pin component 412 can include a source identifier 415 that identifies the multiple sources. For example, the source identifier 415 may identify a single commentator in the comments feature 410 using a corresponding user identifier (e.g., a profile picture), or may identify multiple commentators by displaying multiple identifiers, each identifier representing a corresponding author of one of the comments carried in the comments feature.

[0104] 4C, the interface 400 shows the comments feature 410 in an open state. In the open state, the comment body element 418 of the comments feature 410 is rendered on the canvas 402 to allow the user to view and interact with the comment 419 carried by the comment body element 418. The pin component 408 may remain on the canvas 402 at a pin location (e.g., linked to a design element 409). Additionally, the pin component 408 may change state, for example, to reflect that the comment body element 418 has been viewed (or is in a viewed state). The state change may be reflected by the view state indicator 414, for example, changing the coloring or sharing of the perimeter of the pin component 408.

[0105] Figure 4D shows an expanded and isolated view of the comment body element 418 of Figure 4C. In Figure 4D, the comment body element 418 includes comments 419 from a single commentator, which is indicated by a source identifier 415. In some variations, the comment body element 418 may include other interactive features, such as an input feature (not shown) that allows a user to provide input to mark the resolution of the issue raised by the comment 419.

[0106] 4E illustrates variations of a comment body element 418. In one example shown, the comment body element 418 may be colored or shaded to reflect a user's action of previewing (rather than opening) the comment body element 418. When in preview mode, the comment body element 418 renders comments from a given user without adjusting the viewing state of the comments feature 410. Additionally, in some variations, the comment body element 418 may render a preview of one or more comments without requiring the user to toggle into comment entry mode.

[0107] Referring to FIG. 4F, interface 400 illustrates an example of the comments feature 410 in a closed state after the comments feature 410 has been updated to include comments or other input from multiple users (e.g., four people), according to one or more embodiments. In one example shown, the comments feature 410 conveys comments from multiple users of a collaborative session. In some examples, each user comment may be stored as part of a corresponding comment record 133, and each comment record 133 is associated with a canvas location. In an example, the canvas location corresponds to a coordinate on the canvas (or a range of coordinates, such as an area of ​​the canvas 122). In a variation, the canvas location corresponds to a location of a design element. Alternatively, at least some of the comments indicated by the comments feature 410 may be combined into a given comment record 133.

[0108] 4F, the pin component 408 remains linked to the design element 409. Additionally, the pin component 408 may include data elements that identify some of the sources / authors that provided the input. Additional comments may also change one or more states associated with the comment feature.

[0109] FIG. 4G shows an expanded and isolated view of the pin component 408 of FIG. 4F. The pin component 408 can include one or more source identifiers. In one example shown, the pin component 408 can include a first identifier 415a for a first source, a second identifier 415b for a second source (e.g., a second commentator), and a number 415c representing additional commentators. Numerous variations may be possible, such as a number to indicate the total number of commentators. Additionally, one or more status indicators 414 of the pin component 408 can change to reflect, for example, that a newly inserted comment is unread or that an issue posed by one or more new comments is unresolved.

[0110] FIG 4H shows the interface 400 with the comments feature 410, represented by FIG 4F, in an open state. In the open state, a comment body element 418 may be rendered adjacent or near the pin component 408. The pin component 408 may be linked to a design element 409. In the open state, the comment body element 418 may display comments from multiple users collaborating on a graphic design 425. The comment body element 418 may also provide an input interface to allow users to interact with other users' comments and provide the user's own comments.

[0111] FIG. 4I shows an expanded and isolated view of the comment body element 418 in an open state, as shown in FIG. 4H. In FIG. 4I, the comment body element 418 can include multiple comments 419 from different authors. Additionally, source indicators 415a, 415b, 415c for those comments can be indicated by the comment body element 418. In some variations, the comment body element 418 can enable scroll functionality that allows a user to review and interact with the comments in the comment body element 418. The comment body element 418 can provide interactive features, for example, to allow a user to dismiss (or accept, reject, etc.) issues raised by other users' comments. Once viewed, the view indicator 414 of the pin component 408 can be altered or changed to reflect the change in the state of the comment body element 418, for example, to reflect the state of the comment feature 410 as having been read.

[0112] 4J illustrates a variation of comment body element 418 in a preview state. In the preview state, a user may, for example, view one or more of the comments 419 of comment body element 418. When comment body element 418 is previewed, view state indicator 414 of 408 may remain unchanged, for example to reflect an unread state.

[0113] 4C, 4F, and 4H, the comment body element 418 can be moved across the canvas 402 to allow the user to view the comment 419 and simultaneously work on a particular aspect of the graphic design 425. In this manner, the comment body element 418 can allow the user to use a single view directed at the canvas to implement feedback from the comment 419 of the comment feature regarding a particular aspect of the graphic design 425.

[0114] 4K illustrates a comment sidebar 450 that may be provided to render comments appearing in a canvas or with respect to a particular design, according to one or more embodiments. Each sidebar comment 452 may link to or represent a comment feature 430, and the corresponding comment feature 430 may be rendered or renderable on the canvas 402 along with the corresponding comment component 412 or comment body element 418. In some instances, the comment sidebar 450 may be displayed when the rendering engine 120 is operated in a comment entry mode. The comment sidebar 450 may include a search and filter feature 455 to allow a user to search for comments, for example, by keywords, source or author, metadata (timestamp) or other identifiers of individual comments.

[0115] FIG. 4L illustrates an implementation in which the comment component 300 generates clustering features 460 instead of multiple comment features, according to one or more embodiments. In an example, the pin locations of the comment features 410 (see FIGS. 4A-4L) overlap in display locations (based on the respective pin locations) based on the zoom factor of the respective user computing devices. When the display distance of the pin locations is less than a threshold, the multiple comment features may be considered to overlap. The comment features 410 may be rendered to appear as one clustered comment feature 460. The clustered comment features 460 may include pin locations based on the pin locations of the constituent comment features 435. Additionally, the clustered comment features 460 may include state information, source information, and / or other indicators that indicate information about the constituent comment features, including the source for the individual comment features. For the rendered comment features 410, the source information (or corresponding comment records) for the individual comments. Similarly, when the graphic design 425 undergoes a zooming operation, the clustered comment features 460 may be separated into multiple comment features, as described in conjunction with FIGS. 4A-4J.

[0116] 4M illustrates a simulated (or "prototype") rendering of a graphic design being edited with a comments sidebar, according to one or more embodiments. As shown, a comments sidebar may be provided in conjunction with the prototype rendering of the design being edited to allow a user to view comments along with the features of the graphic design being simulated. The sidebar comments may be hidden or displayed, depending on the implementation and settings.

[0117] FIG. 4N illustrates another exemplary interface in which a comment feature is provided, according to one or more embodiments. In FIG. 4N, a graphic design 470 is rendered on a canvas 472. A user can use the comment component 300 to create a comment feature 474 at a first pin location, which is associated with a design element 475. Additionally or alternatively, a user can drag (or provide other input) the comment feature 474 across an area 477 of the canvas 472. Once dragged, the comment feature 474 is associated with the area 477. In one example shown, the comment feature 474 can be associated with the design element 475 and the area 477. In some implementations, the comment feature 474 is copied to have two pin locations, corresponding to the graphic element 475 and also a location in the canvas area 477. As another addition or variation, a user can select the area 477 and associate a comment feature with the area 477.

[0118] Network Computer Systems

[0119] 5 illustrates a computer system upon which one or more embodiments may be implemented. Computer system 500 may be implemented, for example, on a server or combination of servers. For example, computer system 500 may be implemented as network computing system 150 of FIGS. 1A-1C and further utilized by plug-in management system 200 of FIG. 2.

[0120] In one implementation, computer system 500 includes processing resources 510, memory resources 520 (e.g., read-only memory (ROM) or random-access memory (RAM)), one or more instruction memory resources 540, and a communication interface 550. Computer system 500 includes at least one processor 510 for processing information stored with memory resources 520, such as provided by a random access memory (RAM) or other dynamic storage device for storing information and instructions executable by processor 510. Memory resources 520 may also be used to store temporary variables or other intermediate information during execution of instructions to be executed by processor 510.

[0121] The communications interface 550 allows the computer system 500 to communicate with one or more user computing devices over one or more networks (e.g., cellular networks) through the use of a network link 580 (wireless or wired). Using the network link 580, the computer system 500 can communicate with one or more computing devices, specialized devices and modules, and / or one or more servers.

[0122] In an example, the processor 510 may execute service instructions 522 stored with the memory resources 520 to enable the network computing system to implement the network service 152 and operate as the network computing system 150 in an example such as that described in conjunction with Figures 1A-1C.

[0123] Computer system 500 may also include additional memory resources ("instruction memory 540") for storing executable instruction sets ("IGDS instructions 545") embedded in web pages and other web resources to enable a user computing device to implement functionality as described in conjunction with IGDS 100.

[0124] Thus, the examples described herein relate to the use of computer system 500 to implement the techniques described herein. According to one aspect, the techniques are performed by computer system 500 in response to processor 510 executing one or more sequences of one or more instructions contained in memory 520. Such instructions may be read into memory 520 from another machine-readable medium. Execution of the sequences of instructions contained in memory 520 causes processor 510 to perform the process steps described herein. In alternative implementations, hardwired circuitry may be used in place of or in combination with software instructions to implement the examples described herein. Thus, the examples described are not limited to any specific combination of hardware circuitry and software.

[0125] User Computing Device

[0126] 6 illustrates a user computing device for use with one or more embodiments as described. In an embodiment, user computing device 600 may correspond to, for example, a workstation, desktop computer, laptop, or other computer system having graphics processing capabilities suitable for enabling rendering of design interfaces and graphic design activities. In a variant, user computing device 600 may correspond to a mobile computing device, such as a smartphone, tablet computer, laptop computer, VR or AR headset device, etc.

[0127] In the illustrative example, computing device 600 includes a central or main processor 610, a graphics processing unit 612, memory resources 620, and one or more communication ports 630. Computing device 600 may use main processor 610 and memory resources 620 to store and launch a browser 625 or other web-based application. A user may operate browser 625 using communication port 630 to access a network site of network service 152, and one or more web pages or other resources 605 for network service 152 (see FIGS. 1A-1C and 2) may be downloaded. Web resources 605 may be stored in active memory 624 (cache).

[0128] As will be described with various examples, the processor 610 can detect and execute scripts and other logic embedded in the web resources to implement the IGDS 100 (see FIGS. 1A-1C). In some of the examples, some of the scripts 615 embedded in the web resources 605 can include GPU accelerated logic that is executed directly by the GPU 612. The main processor 610 and the GPU can combine to render a design interface under edit ("DIUE 611") on the display component 640. The rendered design interface can include web content from the browser 625, as well as design interface content and functional elements generated by the scripts and other logic embedded in the web resources 605. By including scripts 615 that are directly executable on the GPU 612, the logic embedded in the web resources 605 can better execute the IGDS 100, as will be described with various examples.

[0129] conclusion

[0130] Although examples are described in detail herein with reference to the accompanying drawings, it should be understood that the concept is not limited to those exact examples. The scope of the concept is therefore to be defined by the following claims and their equivalents. Furthermore, it is contemplated that a particular feature described either individually or as part of an example may be combined with other individually described features or parts of other examples, even if those other features and examples do not mention that particular feature. Thus, the absence of a description of a combination should not exclude the right to such a combination.

Claims

1. a memory subsystem for storing a set of instructions; one or more processors operable to communicate the set of instructions to one or more user devices, the set of instructions, when executed by each of the one or more devices, to cause the one or more devices to: generating one or more comment features to be rendered on a canvas including the graphic design, each comment feature carrying at least one comment from a given source, each comment feature including a pin component and a comment body element; Associating the pin component of each comment feature with a corresponding location on the canvas; enabling a user to interact with comment body elements rendered on the canvas while concurrently providing input to update the graphic design; one or more processors including instructions to cause the processor to perform operations including A network computer system comprising:

2. 2. The networked computer system of claim 1, wherein the corresponding locations on the canvas correspond to design elements of the graphic design.

3. 2. The network computer system of claim 1, wherein the corresponding location on the canvas corresponds to an area of ​​the canvas designated by user input.

4. 2. The network computer system of claim 1, wherein the corresponding locations on the canvas are coordinates of the canvas.

5. 2. The network computer system of claim 1, wherein the actions include enabling the user to move the comment body element around at least an area of ​​the canvas to view the at least one comment from the given source while rendering the pin component to coincide with the corresponding associated location of the canvas.

6. 2. The network computer system of claim 1, wherein the comment body of each comment feature is renderable in one of a plurality of states, including a viewed state and an unviewed state.

7. 2. The network computer system of claim 1, wherein the comment body elements of each comment feature are movable around at least an area of ​​the canvas, one in an unviewed state.

8. 2. The network computer system of claim 1, wherein the pin component of each comment feature provides a visual indicator of the source of at least one comment provided in the comment body.

9. 9. The network computer system of claim 8, wherein said visual indicator comprises an image of a user who created said at least one comment provided in said comment body.

10. 2. The network computer system of claim 1, wherein the one or more comment features include at least a first comment feature that conveys comments from multiple sources, the comment body element of the first comment feature being renderable to enable each of the multiple comments to be viewed.

11. A non-transitory computer-readable medium storing instructions that, when executed by one or more processors of a computer system, cause the computer system to: generating one or more comment features to be rendered on a canvas including the graphic design, each comment feature carrying at least one comment from a given source, each comment feature including a pin component and a comment body element; Associating the pin component of each comment feature with a corresponding location on the canvas; enabling a user to interact with comment body elements rendered on the canvas while concurrently providing input to update the graphic design; A non-transitory computer-readable medium for performing operations including:

12. The non-transitory computer-readable medium of claim 11 , wherein the corresponding locations on the canvas correspond to design elements of the graphic design.

13. The non-transitory computer-readable medium of claim 11 , wherein the corresponding location on the canvas corresponds to an area of ​​the canvas designated by user input.

14. The non-transitory computer-readable medium of claim 11 , wherein the corresponding location on the canvas is a coordinate of the canvas.

15. 12. The non-transitory computer-readable medium of claim 11, wherein the operations include enabling the user to move the comment body element around at least an area of ​​the canvas to view the at least one comment from the given source while rendering the pin component to coincide with the corresponding associated location of the canvas.

16. 12. The non-transitory computer-readable medium of claim 11, wherein the comment body of each comment feature is renderable in one of a plurality of states, including a viewed state and an unviewed state.

17. The non-transitory computer-readable medium of claim 11 , wherein the comment body elements of each comment feature, one in an unviewed state, are movable around at least the area of ​​the canvas.

18. The non-transitory computer-readable medium of claim 11 , wherein the pin component of each comment feature provides a visual indicator of a source of at least one comment provided in the comment body.

19. 20. The non-transitory computer-readable medium of claim 18, wherein the visual indicator comprises an image of a user who created the at least one comment provided in the comment body.

20. 1. A computer-implemented method for operating a network computer system, the method being implemented by one or more processors, comprising: generating one or more comment features on a canvas, each comment feature carrying at least one comment from a given source, each comment feature including a pin component and a comment body element; Associating the pin component of each comment feature with a corresponding location on the canvas; enabling a user to move the comment body element around at least an area of ​​the canvas to view the at least one comment from the given source while rendering the pin component to coincide with the corresponding associated location of the canvas; 4. A computer-implemented method comprising:

Images