Patent ID: 12210735

DETAILED DESCRIPTION

A computer system and method generates one or more commenting features on a canvas, wherein each commenting feature carries at least one comment from a given source. Each commenting feature can 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 the user to move the comment body about at least a region 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.

Among other technical advantages, embodiments such as described enable users to generate interactive and functional commenting features that can be linked to pin locations of the canvas, to enable reviewers to readily view the comment and the design element or aspect which the comment pertains to. Accordingly, in examples, a graphic design system is provided that can operate in at least a first mode where users can interact with commenting features and design elements of a graphic design at the same time. In some examples, a graphic design system is provided that can operate in additional modes, including in a second mode where all comments can be hidden. Moreover, in examples where commenting features are provided on a graphic design, commenting features can be represented by pin components that hide the commentary, thereby minimizing the presence of the commenting feature.

Embodiments further recognize that graphic designs are inherently cluttered. For example, in a collaborative environment, changes made to a graphic design by one user can be difficult to spot by another user. Embodiments provide for a graphic design system that displays commenting features as pin components, where comments are not visible, and visual aspects of the pin components are modulated to reflect changes pertaining to the commenting feature. For example, pin components for commenting features can be modulated to reflect the commenting feature is new, updated or unresolved. Such visual cues can inform the user where his attention may be required on the canvas.

One or more embodiments described herein provide that methods, techniques, and actions performed by a computing device are performed programmatically, or as a computer-implemented method. Programmatically, as used herein, means through the use of code or computer-executable instructions. These instructions can be stored in one or more memory resources of the computing device. A programmatically performed step may or may not be automatic.

One or more embodiments described herein can be implemented using programmatic modules, engines, or components. A programmatic module, engine, or component can include a program, a sub-routine, a portion of a program, or a software component or a hardware component capable of performing one or more stated tasks or functions. As used herein, a module or component can exist on a hardware component independently of other modules or components. Alternatively, a module or component can be a shared element or process of other modules, programs or machines.

Some embodiments described herein can generally require the use of computing devices, including processing and memory resources. For example, one or more embodiments described herein may be implemented, in whole or in part, on computing devices such as servers, desktop computers, cellular or smartphones, tablets, wearable electronic devices, laptop computers, printers, digital picture frames, network equipment (e.g., routers) and tablet devices. Memory, processing, and network resources may all be used in connection with the establishment, use, or performance of any embodiment described herein (including with the performance of any method or with the implementation of any system).

Furthermore, one or more embodiments described herein may be implemented through the use of instructions that are executable by one or more processors. These instructions may be carried on a computer-readable medium. Machines shown or described with figures below provide examples of processing resources and computer-readable mediums on which instructions for implementing embodiments of the invention can be carried and/or executed. In particular, the numerous machines shown with embodiments of the invention include processor(s) and various forms of memory for holding data and instructions. Examples of computer-readable mediums include permanent memory storage devices, such as hard drives on personal computers or servers. Other examples of computer storage mediums include portable storage units, such as CD or DVD units, flash memory (such as carried on smartphones, multifunctional devices or tablets), and magnetic memory. Computers, terminals, 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 computer-readable mediums. Additionally, embodiments may be implemented in the form of computer-programs, or a computer usable carrier medium capable of carrying such a program.

Graphic Design System

FIG.1Aillustrates an interactive graphic design system for a computing device of a user, according to one or more examples. An interactive graphic design system (“IGDS”)100can be implemented in any one of multiple different computing environments. For example, in some variations, the IGDS100can be implemented as a client-side application that executes on the user computing device10to provide functionality as described with various examples. In other examples, such as described withFIG.1BandFIG.1C, the IGDS100can be implemented through use of a web-based application80. As an addition or alternative, such as described withFIG.1, the IGDS100can be implemented as a distributed system, such that processes described with various examples execute on a network computer (e.g., server) and on the user device10.

According to examples, the IGDS100can be implemented on a user computing device10to enable a corresponding user to design various types of interfaces using graphical elements. The IGDS100can include processes that execute as or through a web-based application80that is installed on the computing device10. As described by various examples, web-based application80can execute scripts, code and/or other logic (the “programmatic components”) to implement functionality of the IGDS100. Additionally, in some variations, the IGDS100can be implemented as part of a network service, where web-based application80communicates with one or more remote computers (e.g., server used for a network service) to executes processes of the IGDS100.

In some examples, web-based application80retrieves some or all of the programmatic resources for implementing the IGDS100from a network site. As an addition or alternative, web-based application80can retrieve some or all of the programmatic resources from a local source (e.g., local memory residing with the computing device10). The web-based application80may also access various types of data sets in providing the IGDS100. The data sets can correspond to files and libraries, which can be stored remotely (e.g., on a server, in association with an account) or locally. The data sets can also include comment records and a comment record data store, as described below.

In examples, the web-based application80can correspond to a commercially available browser. In such examples, the processes of the IGDS100can be implemented as scripts and/or other embedded code which web-based application80downloads from a network site. For example, the web-based application80can execute code that is embedded within a webpage to implement processes of the IGDS100. The web-based application80can also execute the scripts to retrieve other scripts and programmatic resources (e.g., libraries) from the network site and/or other local or remote locations. By way of example, the web-based application80may execute JAVASCRIPT embedded in an HTML resource (e.g., web-page structured in accordance with HTML 5.0 or other versions, as provided under standards published by W3C or WHATWG consortiums). In some examples, the rendering engine120and/or other components may utilize graphics processing unit (GPU) accelerated logic, such as provided through WebGL (Web Graphics Library) programs which execute Graphics Library Shader Language (GLSL) programs that execute on GPUs.

According to examples, user of computing device10operates web-based application80to access a network site, where programmatic resources are retrieved and executed to implement the IGDS100. In this way, the user may initiate a session to implement the IGDS100for purpose of creating and/or editing a design interface. In examples, the IGDS100includes a program interface102, an input interface118, and a rendering engine120. The program interface102can include one or more processes which execute to access and retrieve programmatic resources from local and/or remote sources.

In an implementation, the program interface102can generate, for example, a canvas122, using programmatic resources which are associated with web-based application80(e.g., HTML 5.0 canvas). As an addition or variation, the program interface102can trigger or otherwise cause the canvas122to be generated using programmatic resources and data sets (e.g., canvas parameters) which are retrieved from local (e.g., memory) or remote sources (e.g., from network service).

The program interface102may also retrieve programmatic resources that include an application framework for use with canvas122. The application framework can include data sets which define or configure, for example, a set of interactive graphic tools that integrate with the canvas122and which comprise the input interface118, to enable the user to provide input for creating and/or editing a design interface.

According to some examples, the input interface118can be implemented as a functional layer that is integrated with the canvas122to detect and interpret user input. The input interface118can, for example, use a reference of the canvas122to identify a screen location of a user input (e.g., ‘click’). Additionally, the input interface118can interpret an input action of the user based on the location of the detected input (e.g., whether the position of the input indicates selection of a tool, an object rendered on the canvas, or region of the canvas), the frequency of the detected input in a given time period (e.g., double-click), and/or the start and end position of an input or series of inputs (e.g., start and end position of a click and drag), as well as various other input types which the user can specify (e.g., right-click, screen-tap, etc.) through one or more input devices. In this manner, the input interface118can interpret, for example, a series of inputs as a design tool selection (e.g., shape selection based on location of input), as well as inputs to define attributes (e.g., dimensions) of a selected shape.

Additionally, the program interface102can be used to retrieve, from local or remote sources, programmatic resources and data sets which include files101which comprise an active workspace for the user. The retrieved data sets can include design elements which collectively form a graphic design125(or a design interface that is in progress). Each file101can include one or multiple DSR representation111(shown as “DSR111”) which collectively define graphic design125. As described in more detail with some examples, the DSR representation111can include a document object model (DOM). The files101may also include additional data sets which are associated with the active workspace. For example, as described with some examples, the workspace file can store commenting records133, which can be rendered as commenting features135by the rendering engine120.

In examples, the rendering engine120uses the DSR representation111to render a corresponding graphic design125on the canvas122, wherein the graphic design125reflects design elements and their respective attributes as provided with the individual pages of the files101. The user can edit the graphic design125using the input interface118. Alternatively, the rendering engine120can generate a blank page for the canvas122, and the user can use the input interface118to generate the graphic design125. As rendered, the graphic design125can 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 an object, the types of attributes include, shape, dimension (or size), layer, type, color, line thickness, text size, text color, font, and/or other visual characteristics. Depending on implementation, the attributes reflect properties of two- or three-dimensional designs. In this way, attribute values of individual objects can define, for example, visual characteristics of size, color, positioning, layering, and content, for elements that are rendered as part of the graphic design125.

As described with some examples, the input interface118can also include tools for enabling a user to create, update, edit and/or resolve delete commenting features and records. Commenting features can correspond to interactive user-interface elements that are rendered on, or over (or with) the canvas122, to carry and receive user-specified input. Each commenting feature can be based on or correspond to a comment record. Comment records can correspond to structured data sets which carry the user-specified comment, as well as other data sets, such as state values and source identifiers. The comment records that are associated or otherwise provided with a graphic design can be stored or maintained with a comment record store.

According to some examples, the rendering engine120executes commenting logic132to render interactive commenting features135on (or over) the canvas122. Each commenting feature135can correspond to an interactive element that renders user-specified content, and can receive user input (e.g., text input, link, image, reaction, emoji, etc.). Each commenting feature135can correspond to a comment record133, which can be stored with the associated files101. The rendering engine120may also enable comment records133to be viewed separately in a structured or tabular format, such as in a comment sidebar138adjacent to the canvas122. A user can interact with a design tool of the input interface118to create a commenting feature135and corresponding comment record133. The rendering engine120can also implement the commenting logic132to enable the user to view and update individual comment records133through interaction with corresponding commenting features135. Likewise, the rendering engine120can render the commenting feature135based on the comment record133, and in accordance with one or more examples as described. With reference to an example ofFIG.1A, the rendering engine120can also implement the commenting logic132to retrieve commenting records133from a local data store, in order to render corresponding commenting features135.

In examples, commenting features135can be pinned, linked or otherwise associated with a pin location. The pin location of a commenting feature can coincide with a particular design element (e.g., shaped design element), rendered on the canvas122. In some implementations, when a commenting feature135is pinned to a design element, a reference to the commenting feature135(or corresponding record133) can be generated and associated with a node identifier within the DSR representation111that identifies the pinned design element. Subsequently, when the design element is moved or resized, the comment feature can be automatically moved or repositioned to maintain a relative position (or spatial relationship) between the commenting feature135and pin location.

In examples, each comment record133includes a source identifier, one or more comments (e.g., text, image data, links or other content provided by a user), and/or metadata, where the metadata includes identifiers for authors or sources for the content of the comment, time stamps when individual content contributions were made to the comment record133, and state information indicating whether the comment is resolved/unresolved, and/or viewed/unviewed. In some variations, individual comment records133can identify a canvas location data, which identifies a location on the canvas122which is to be associated with a particular comment. As described with examples, the location of the comment with respect to the canvas122can correspond to a canvas location (e.g., such as identified by X-Y coordinates), a region of the canvas, or a design element.

The rendering engine120can also implement commenting logic132to provide the comment sidebar138where comment records133can be created, updated and rendered. The user can also interact with the comment sidebar138to view, search, sort or filter the comment records133. In some examples, the comment sidebar138is implemented as a modal feature that the user can select/toggle when providing input. The comment sidebar138can be toggled to enable the user to provide input that is designated for comments (or comment records133).

As an addition or variation, the comment sidebar138is provided to enable the user to access and/or update comment records133while at the same time enabling the user to edit the graphic design125. In some examples, the comment sidebar138can be implemented to have an operational mode, where information carried by individual comment records133can be viewed and acted upon by a user at the same time as the user is able to edit the graphic design125.

In examples, the IGDS100operates to implement multiple modes, including a first mode where the user can view and interact with commenting features135as rendered on the canvas122, while also interacting with the IGDS100to update and edit the graphic design125. Further, additional interactive elements for enabling the user to create and edit commenting features135is also enabled. In this way, the user may have full access to the input interface118and functionality of the IGDS100(e.g., interactive design tools on sidebar, canvas tools, etc.), while also enabling the user to utilize the commenting functionality of the IGDS100. Thus, for example, the user can interact with the graphic design125of the canvas to make edits or changes to the graphic design, while at the same time viewing and interacting with commenting features135.

Still further, in examples, the IGDS100can be operated in alternative modes to facilitate use of commenting features. In examples, the rendering engine120can implement the commenting logic132to operate in a first mode, where users can create and interact with commenting features that are provided on the canvas122. Further, the rendering engine120can be implemented in alternative modes, including in a second mode where commenting features are hidden, so as to un-cluster the graphic design125. Still further, in alternative modes, the rendering engine120can be rendered to display commenting features that have a particular states, such as commenting features that are new (or updated) or unresolved.

Network Computing System to Implement IGDS

FIG.1Billustrates a network computing system to implement an interactive graphic design system on a user computing device, according to one or more examples. A network computing system such as described with an example ofFIG.1Bcan be implemented using one or more servers which communicate with user computing devices over one or more networks.

In an example ofFIG.1B, the network computing system150performs operations to enable the IGDS100to be implemented on the user computing device10. In variations, the network computing system150provides a network service152to support the use of the IGDS100by user computing devices that utilize browsers or other web-based applications. The network computing system150can include a site manager158to manage a website where a set of web-resources155(e.g., web page) are made available for site visitors. The web-resources155can include instructions, such as scripts or other logic (“IGDS instructions157”), which are executable by browsers or web components of user computing devices.

In some variations, once the computing device10accesses and downloads the web-resources155, web-based application80executes the IGDS instructions157to implement functionality such as described with some examples ofFIG.1A. For example, the IGDS instructions157can be executed by web-based application80to initiate the program interface102on the user computing device10. The initiation of the program interface102may coincide with the establishment of, for example, a web-socket connection between the program interface102and a service component160of the network computing system150.

In some examples, the web-resources155includes logic which web-based application80executes to initiate one or more processes of the program interface102, causing the IGDS100to retrieve additional programmatic resources and data sets for implementing functionality as described by examples. The web resources155can, for example, embed logic (e.g., JAVASCRIPT code), including GPU accelerated logic, in an HTML page for download by computing devices of users. The program interface102can be triggered to retrieve additional programmatic resources and data sets from, for example, the network service152, and/or from local resources of the computing device10, in order to implement the IGDS100. For example, some of the components of the IGDS100can be implemented through web-pages that can be downloaded onto the computing device10after authentication is performed, and/or once the user performs additional actions (e.g., download one or more pages of the workspace associated with the account identifier). Accordingly, in examples as described, the network computing system150can communicate the IGDS instructions157to the computing device10through a combination of network communications, including through downloading activity of web-based application80, where the IGDS instructions157are received and executed by web-based application80.

The computing device10can use web-based application80to access a website of the network service152to download the webpage or web resource. Upon accessing the website, web-based application80can automatically (e.g., through saved credentials) or through manual input, communicate an account identifier to the service component160. In some examples, web-based application80can also communicate one or more additional identifiers that correlate to a user identifier.

Additionally, in some examples, the service component160can use the user or account identifier to retrieve profile information109from a user profile store166. As an addition or variation, profile information109for the user can be determined and stored locally on the user's computing device10.

The service component160can also retrieve the files of an active workspace (“active workspace files163”) that are linked to the user account or identifier from a file store164. The profile store166can also identify the workspace that is identified with the account and/or user, and the file store164can store the data sets that comprise the workspace. The data sets stored with the file store164can include, for example, the pages of a workspace, data sets that identify constraints for an active set of workspace files, and one or more data structure representations161for the design under edit which is renderable from the respective active workspace files.

Additionally, in examples, the service component160provides a representation159of the workspace associated with the user to the web-based application80, where the representation identifies, for examples, individual files associated with the user and/or user account. The workspace representation159can be in the form of, for example, a document object model (DOM) representation111. The representation159can identify a set of files, where each file includes one or multiple pages, and each page including objects that are part of a design interface.

On the user device10, the user can view the workspace representation through web-based application80, and the user can elect to open a file of the workspace through web-based application80. In examples, upon the user electing to open one of the active workspace files163, web-based application80initiates the canvas122. For example, the IGDS100can initiate an HTML 5.0 canvas as a component of web-based application80, and the rendering engine120can access the DSR111of a graphic design125, to render the corresponding graphic design125on the canvas122.

In an example ofFIG.1B, the rendering engine120implements the commenting logic132to access and render comment records133and commenting features135as part of an online design environment. For example, the comment records133can be retrieved from, for example, a remote source (including third-party site), in order to render commenting features135with the graphic design125.

Collaborative Network Platform

FIG.1Cillustrates a network computing system to implement an interactive graphic design system for multiple users in a collaborative environment, according to one or more embodiments. In an example ofFIG.1C, a collaborative network platform is implemented by the network computing system150, which communicates with multiple user computing devices10,12over one or more networks (e.g., World Wide Web) to implement the IGDS100on each of multiple computing devices10,12. WhileFIG.1Cillustrates an example in which two users utilize the collaborative network platform, examples as described allow for the network computing system150to enable collaboration on design interfaces amongst a larger group of users.

With respect toFIG.1C, the user computing devices10,12can be assumed as being operated by users that are associated with a common account, with each user computing device10,12implementing a corresponding IGDS100to access the same workspace during respective sessions that overlap with one another. Accordingly, each of the user computing devices10,12may access the same set of active workspace files163at the same time, with the respective program interface102of the IGDS100on each user computing device10,12operating to establish a corresponding communication channel (e.g., web socket connection) with the service component160.

In examples, the service component160can communicate a copy of the active workspace files163to each user computing device10,12, such that the computing devices10,12render the graphic design125of the active workspace files163at the same time. Additionally, each of the computing devices10,12can maintain a local DSR representation111of the respective graphic design125, as determined from the active workspace files163. The service component160can also maintain a network-side data structure representation161obtained from the files of the active workspace163, and coinciding with the local data structure representations111on each of the computing devices10,12.

The network computing system150can continuously synchronize the active workspace files163on each of the user computing devices. In particular, changes made by users to the graphic design125on one computing device10,12may be immediately reflected on the graphic design125rendered on the other user computing device10,12. By way of example, the user of computing devices10,12can make a change to the respective graphic design125, and the respective rendering engine120can implement an update that is reflected in the local copy of the DSR representation111. From the computing device10, the program interface102of the IGDS100can stream change data121, reflecting the change of the user input, to the service component160. The service component160processes the change data121of the user computing device. The service component160can use the change data121to make a corresponding change to the network-side data structure representation161. The service component160can also stream remotely-generated change data171(which in the example provided, corresponds or reflects change data121received from the user device10) to the computing device12, to cause the corresponding IGDS100to update the graphic design125as rendered on that device. The computing device12may also use the remotely generated change data171to update with the local data structure representation111of that computing device12. The program interface102of the computing device12can receive the update from the network computing system150, and the rendering engine120can update the graphic design125and the respective local copy of the DSR representation111of computing device12.

The reverse process can also be implemented to update the data structure representations161of the network computing system150using change data121communicated from the second computing device12(e.g., corresponding to the user of the second computing device updating the graphic design125as rendered on the second computing device12). In turn, the network computing system150can stream remotely generated change data171(which in the example provided, corresponds or reflects change data121received from the user device12) to update the local DSR representation111of the graphic design125on the first computing device10. In this way, the graphic design125of the first computing device10can be updated as a response to the user of the second computing device12providing user input to change the graphic design125.

To facilitate the synchronization of the DSR representations111,111on the computing devices10,12, the network computing system150implements a stream connector to merge the data streams which are exchanged between the first computing device10and the network computing system150, and between the second computing device12and the network computing system150. In some implementations, the stream connector can be implemented to enable each computing device10,12to make changes to the network-side data representation161, without added data replication that may otherwise be required to process the streams from each device separately.

Additionally, over time, one or both of the computing devices10,12may become out-of-sync with the server-side data representation161. In such cases, the respective computing device10,12can redownload the active workspace files163, to restart its maintenance of the data structure representation of the graphic design125that is rendered and edited on that device.

Synchronizing Commenting Features and Records

In some implementations, the rendering engine120implements commenting logic132to render commenting records133and features135, and to synchronize creation/change of commenting records133and features135amongst collaborating users. For example, the commenting features135can be referenced in the DSR representations111, along with design elements that comments are pinned to. Changes to the commenting features135(and corresponding commenting records133) can be synchronized through synchronization by the DSR representations111, as described with some examples.

With reference to an example ofFIG.1C, comment records133and features135can have multiple authors in a collaborative environment. For example, in an online collaborative session, multiple users may provide comments to a commenting feature135that is associated with a design element, and the users can generate and/or update comments carried by the commenting features. Each commenting record133and feature135can be used to carry a messaging thread that includes contributions by multiple users of the collaborative environment. In this way, each commenting feature135enables users to provide feedback and input while focusing their attention on a design element or specific portion of the canvas. In such examples, a series or sequence of comments can be structured as a thread. The rendering engine120can implement the commenting logic132to link or otherwise structure comment records133that are presumed or otherwise indicated as being part of a common thread (e.g., comment that is a reply to another comment). In some variations, comment threads can be implemented by updating individual comment records133to include comments from multiple users.

In a collaborative environment, the commenting features and corresponding comment records133can include state information (e.g., whether an associate, the comment record133has been “read”). Further, in some examples, some of the state information can be specific to individual users of a collaborative session. For example, the state information may be specific to the particular viewer, indicating whether that viewer has previously opened the commenting feature135or the corresponding record133. As an addition or variation, the state information can indicate whether the commenting feature135and records133are resolved. In a collaborative environment, the variation in state data can be reflected by visually modulating the appearance of the commenting features (e.g., the pin component408(seeFIG.4AthroughFIG.4J)). In this way, users can readily identify commenting features135that require user attention, where input is provided by another user.

Clustering of Commenting Features

With reference toFIG.1AthroughFIG.1C, the rendering engine120can implement commenting logic132to render commenting features135in clusters. In particular, examples provide for the commenting features135to be clustered when conditions are satisfied with respect to the associated pin locations of the commenting features135are deemed to overlap. When clustered, the rendering engine120can generate an alternative comment cluster element139, where the comment cluster element139indicates information about underlying commenting features135and the associated commenting records133. For example, the alternative cluster element139can include information such as the number of commenting features in the cluster, the number of unresolved or new comments in the cluster, the number of sources behind the clusters, and/or information about recently updated commenting features.

In examples, the determination that commenting features135are to be represented by a cluster element139can be based in part on the relative display positioning of the commenting features135. The display positioning139can be based on the zoom level of the respective user computing device10,12. Accordingly, the determination that multiple commenting features135are to be represented by a cluster element139can be based on whether the positioning of commenting features135at a selected zoom level are separated by a display distance that is less than a threshold. In such case, multiple commenting features138are said to satisfy overlap conditions, and the rendering engine120represents the multiple commenting features135as a clustered element139.

In examples, the overlap conditions can be based on a visual separation as between the pin locations of commenting features that are being clustered, where the visual separation reflects a screen distance. For example, if the visual separation between two or more commenting features135is less than a designated threshold, the rendering engine120renders the commenting features135as a cluster element139. As the display area of each user computing device reflects a user-specific magnification parameter, the selection of comment features135for rendering in cluster form can be dynamically determined for individual users, based on the respective users magnification settings. Thus, the user's zoom level can dynamically vary a cluster element, including the number of commenting features135represented by the clustering element and/or the state information indicated by the clustering element139. Similarly, the rendering engine120can dynamically eliminate the clustering element139when the zoom level is sufficiently magnified.

By way of illustration, for a given user that has “zoomed out”, a given display region (e.g., threshold display area) may encompass a greater number of pin locations having associated comment records133. In such a case, the rendering engine120can display the corresponding commenting features as a corresponding clustered element139, where the commenting features135are displayed in a group on a display area of the canvas, at the selected zoom level.

Conversely, for another user that has “zoomed in”, a given display region may encompass only one pin location that is associated with a commenting feature135. In such a case, the portion of the canvas122can include a singular commenting feature135.

Methodology

FIG.2illustrates an example method for creating commenting features for a graphic design, according to one or more embodiments. A method such as described with an example ofFIG.2can be implemented using a system such as described with examples ofFIG.1AthroughFIG.1C. Accordingly, reference may be made to elements ofFIG.1AthroughFIG.1Cfor purpose of illustrating components for implementing a step or sub-step being described. Additionally, in describing examples ofFIG.2, reference is madeFIG.4AthroughFIG.4Jfor purpose of illustrating example commenting features, according to one or more embodiments.

With reference toFIG.2, in step210, the IGDS100generates one or more commenting features410for a graphic design425, rendered on a canvas402. Each commenting feature410can be generated by a user operating a corresponding computing device10,12. In a collaborative environment, users can view the graphic design425and comment on specific aspects of the graphic design (e.g., such as an attribute of a shaped element).

In step220, the IGDS100associates, or otherwise links each commenting feature410to a pin location on the canvas402. In examples, the pin location can correspond to a coordinate (or set of coordinates) on the canvas402. In variations (see step224), the pin location can correspond to a design element. Still further, the pin location can correspond to a region of the canvas402(e.g., seeFIG.4N).

As described with some examples, the renderable elements of a commenting feature410include a pin component408(seeFIG.4A-4J) and a comment body element418(seeFIG.4A-4J). When the commenting feature410is created, the pin component408can be rendered on (or over) the canvas402at a location that is determined by the pin location.

In examples, step224can provide for the pin location to correspond to a design element. A user can provide input that specifies the pin location of a commenting feature410to be a shaped element. For example, the user can elect to insert a comment to provide feedback (e.g., for the designer) about a particular design element of the graphic design425. The user can interact with the IGDS100to specify the particular design element (e.g., the user enters separate commands to select the shaped design element and create comment). In response, the IGDS100creates a new commenting feature410on the canvas402, where the newly created commenting feature410is linked to the particular design element of the user input. Further, in examples, a pin component408can be rendered over or near a shaped element or frame that is linked to the commenting feature410. As further described with examples, the comment body element418of the commenting feature410can be adjoined, hidden, or separated from the pin location, depending on implementation, setting or user input.

In step230, the commenting feature410is rendered on the canvas402with the graphic design425. In examples, the commenting feature410can be rendered in a closed state and an open state. In the closed state, the pin component408can be rendered on the canvas402without the comment body element418. In the open state, the comment body element418can be rendered on the canvas402with the graphic design425. In both open and closed states, examples provide for the pin component408to be rendered in a designated proximity or position relative to the linked design element409.

In step240, the IGDS100enables the user to manipulate the rendering includes enabling the user to manipulate one or more attributes of the linked design element409while maintaining a relative position of at least a portion of the commenting feature with respect to the shape element. In some examples, the pin component408of the commenting feature410can be moved or repositioned to maintain a positional relationship with respect to the linked design element. In some variations, the comment body element418can also be repositioned based on the design element409being moved or resized.

As an addition or alternative, the IGDS100can enable the user to interact with the commenting feature410(e.g., with the comment body element418), while the user is able to update the graphic design425on the canvas402. For example, the user can open and position (and reposition) the comment body element418over the canvas, while editing the graphic design425using tools and functionality of the IGDS100. The interactions between the user and the comment body element418can include viewing, editing a comment, adding a new comment, reacting, interacting with an issue resolution feature (e.g., checkmark), dismissing the comment etc. In some examples, the IGDS100can include alternative modal implementations, incoming a comment-design mode where the user can interact with commenting features and with tools and functionality for updating the graphic design425.

Commenting Component

FIG.3illustrates a commenting component, according to one or more embodiments. A commenting component300such as described with an example ofFIG.3can represent components and processes of IGDS100which implement commenting logic132. Accordingly, in examples, commenting component300can be implemented by the rendering engine120(or another component of the IGDS100) executing commenting logic132, such as described in examples ofFIG.1AthroughFIG.1C. Further, reference may be made to elements described withFIG.4AthroughFIG.4Jfor purpose of illustration.

With reference toFIG.3, the commenting component300implements processes to provide one or multiple input interfaces310for enabling users to create and interact with commenting features330of a graphic design. As described with other examples, commenting features330include user-interactive features that carry and show comments—content entered by individual users—with respect to aspects of the rendered graphic design. Using an input interface310, a user can create a new commenting feature330for a graphic design by specifying a corresponding input311. Further, the input311can specify a pin location313for the comment. In some examples, the pin location313identifies a graphic element (e.g., shaped element, frame component, etc.), or a portion thereof. For example, a user can create a comment by selecting a shaped element rendered on canvas122, and using a toolbar are dedicated input mechanism to create a new comment that is pinned to the shaped element. When the pin location313corresponds to a design element, the comment rendering320can map a selected location by the user with a design element, using, for example, a hierarchical representation of the graphic design125. In some variations, the comment rendering320accesses a DOM representation to identify a top level node (e.g., top-most level node that is not a page node) that corresponds to the location specified by the input. Subsequently, when the design element of the pinned location is moved or resized on the canvas, the comment is similarly moved and repositioned.

As an addition or variation, the pin location313can specify a canvas location (e.g., X, Y coordinate recorded on canvas122). As still another variation, the pin location can specify a region of the canvas122, such as a region which encompasses multiple design elements.

New Comment Generation

In response to the new comment input311, the commenting component300implements processes represented by record manager316to create a new comment record323that is stored in a comment record store325, in association with the corresponding graphic design125rendered on the canvas122. A comment record store325can represent a data structure that stores a comment record323for a newly created store. Additional commenting features330and corresponding records325can be created and rendered by one or multiple users (e.g., such as in a collaborative environment), resulting in multiple comment records323being stored with the comment record store325. In this way, each rendered comment on the graphic design125can include a corresponding comment record323that is stored as part of the comment record store325.

Further, in response to the new comment input311, the comment rendering process320renders a new corresponding commenting feature330with the graphic design125. As described with examples, the commenting feature330can be interactive, and positioned on or over the canvas122at a position that is based on the specified pin location313. The comment records323can also be viewed through a dedicated commenting interface, separate from the canvas122.

According to some examples, the commenting feature330is generated to include a pin element322and a comment body element324. Depending on implementation, the pin element322can be positioned adjacent, near or over the pin location313. For example, a set of positioning rules can be utilized to determine a position of the pin element322relative to the corresponding pin location313specified by the user input. For example, the pin element322can be spaced from the pin location313by either (i) a fixed or dynamic distance that is measured relative to the canvas122(e.g., number of pixels separating reference point of pin element322from the pin location313); and/or (ii) a visual distance that may be dynamically determined based in part on a zoom level of the user.

In examples, the comment body element324is interactive and can form part of the input interface for that particular comment. An initial user can create the commenting feature330, by specifying the pin location313, and interacting with the comment body element324to provide input (e.g., comment, reactionary input, emoji, link, image, etc.). Subsequently, comment rendering320can render the commenting feature330, with the comment body element324including the user-specified content. The comment body element324can be implemented as an element that can be rendered in a closed state, opened, and interacted with when opened. When a commenting feature is opened, other users can interact with, for example, the comment body element324to generate additional comments, respond to existing comments, react to comments (e.g., specify emoji) navigate comments (e.g., scroll or search within the comment body element324) or perform other functions. Still further, in some implementations, the comment body element324can carry a thread of messages which users exchange.

Updating Comments

When implemented in a collaborative environment, multiple users can contribute to the content carried by the comment body element324of individual commenting features330. The comment input interface310can include processes to detect interactions with the comment body element324of each commenting feature330. When further interaction is detected, either by the original user who created the content, or by another user, the input interface310can update the corresponding comment record323to reflect the additional input. Further, comment rendering320can update the rendering of the commenting feature330where the input was received.

By way of illustration, a first user (e.g., reviewer) can generate a commenting feature to provide feedback for a particular design element or aspect of the graphic design. A second user (e.g., design user) can implement a feedback a suggestion conveyed through the comment body element324of the commenting feature330. Alternatively, a second user (e.g., the design user or another reviewer) can respond to the feedback by providing his own content. In some variations, the commenting feature330can include a resolution input mechanism that allows any user to respond to a comment by indicating the issue raised by the comment has been resolved. Depending on implementation, issue resolution mechanism can correspond to, for example, a checkmark feature which the responding user can click to communicate resolution. As an addition or variation, the issue resolution mechanism can include a dismiss or question feature, or other shortcut inputs that specify a particular category of response.

Comment Activity Monitoring

In examples, the commenting component300can implement processes, represented by comment activity monitor336, to track and convey information relating to events that occur with respect to each commenting feature330or record323. The activity monitor336can record such event information for each commenting feature330with the corresponding comment record323. In some examples, each comment record323can be associated with one or multiple state values that reflect different types of events which may occur with respect to a given comment.

In some examples, a comment (i.e., content entered by a user through the comment body element324of a commenting feature) can be categorized (e.g., by user input) or otherwise assumed to be an issue. Activity monitor336can identify an issue resolution state of the corresponding comment record323to be unresolved. When subsequent user input is received, by the same or different user, the issue resolution state can be changed in state to reflect resolution (“resolved”). In variations, the determination of whether the issue is resolved can be based on the type of input that is subsequently received. For example, a subsequent user can specify input that indicates the issue has been resolved. Alternatively, the determination of whether the issue has been resolved can be based in part on whether a user identified in the preceding comment subsequently provided input for the comment body element324, and/or input of a particular type or kind (e.g., the user clicked a checkmark, or specified the term “resolved”). In cases where the comment body element324of a commenting feature330includes multiple comments, the activity monitor336can identify multiple issues for resolution. For example, the comment body element324can be structured to enable commenting users to specify or indicate their respective comments as being an issue. The activity monitor336can maintain an issue resolution state for each comment, or alternatively for a corresponding comment record323of each commenting feature330. In the latter case, the comment record323can reflect an unresolved state when only one issue remains unresolved.

The comment rendering320can render commenting features330on the canvas in alternative view states. In some examples, comment rendering320renders commenting features330in closed and open states. In the closed state, the commenting feature330can appear as pin component322, such that the comment body element324is either not visible, or minimized. A user can interact with the pin component322to open or view the comment body element324. For example, the user can elect to preview the contents of the comment body element324(e.g., view-only mode), or open and interact with the comment body element324(e.g., enter a reply to a comment, react, check off to an existing comment, etc.).

Further, in examples, the commenting body element324can move, responsive to user input, while the commenting feature330is in the open state. In such examples, a user can move the commenting feature to a specific location on the canvas122, without changing the pin location or moving the pin component322. In such examples, a user can move the commenting body element324to a position on the canvas that is most convenient, such as immediately adjacent to a design element that is specified by the content of the comment body element324. This allows the user to make an edit to the graphic while the user views the identified or relevant design elements of the comment.

Additionally, in some examples, the commenting component300can implement a comment-design mode, where comment rendering320enables the user to view and interact with the commenting features330, while also enabling the user to edit or update the graphic design125on the canvas122at the same time. In the comment-design mode, the user may have full access to the design tools and functionality of the IGDS100. Thus, the user can interact with the commenting feature330(e.g., open and view the comment body element324, move the comment body element324about the canvas) while also enabling the user to make edits to the graphic design125. In this way, the user's attention can remain on the canvas122, at precise locations relating to work which may be identified by the comments of the commenting body element324. In variations, the commenting component300can be toggled, so that comment rendering320hides the commenting features, enabling the user to view and edit/update the graphic design125without the commenting features cluttering their views of the graphic design125.

In a collaborative environment, the commenting component300can be implemented in a mode that is specified by a given user. Thus, each user can implement a desired comment-design mode to collaborate on the graphic design125.

Further, in some examples, when a new comment is generated, the corresponding comment record323can record a view state of the commenting feature330. The activity monitor336can record when a user views the corresponding comment body element324, in order to view and interact with one or more comments. The activity monitor336can update the view state of the comment record323to be, for example, viewed, reflecting that a user opening the comment body element324. Further, the activity monitor336can record an identifier of the user that viewed the comment, such that the view state of the comment can be user specific. Once the user opens the comment body element324, the activity monitor336can change the state associated with the comment to viewed. However, when another user adds to the comment of the comment body element324, the activity monitor336can record the event by again changing the state of the comment record, to reflect that there is unviewed content with the commenting feature330. Further, the corresponding comment record323can be updated to reflect the newly entered comment.

Still further, in some examples, the activity monitor336associates each comment record323with a user identifier of each user which provided a comment for the corresponding commenting feature. In some implementations, each user identifier is associated with a user profile, which can include a profile picture, name, or other identifier (nickname etc.).

Comment rendering320can render information to represent events which occur with respect to individual commenting features330. Comment rendering320can selectively render each commenting feature330to indicate, for example, a source of each comment (e.g., the user or author that provided a comment), a number of comments (or alternatively unresolved comments) associated with each commenting feature, and/or an identifier of a last person that provided a comment (or an unresolved comment). By way of example, comment rendering320can render the commenting feature330to include a number, reflecting the number of commentators, comments and/or the number of unresolved issues. By way of example, the commenting feature330can render the pin component322and/or the comment body element324(in the closed state) to reflect a number of commentators, a number of unresolved issues, and/or a last issue. Further, comment rendering320can render the commenting feature330to reflect state information, such as whether the comments of the commenting feature or unresolved, or whether the comment body element324carries a new comment that is unviewed. When the comment body element324is opened, the various comments rendered with indicators of, for example, the source (or author) of the comment, a timestamp when the comment was entered and other information.

In examples, the comment rendering320can also generate cluster elements in place of commenting features, based on the zoom level and/or relative positioning of the commenting features330with respect to the display area. If commenting features330are deemed to be within a sufficient display distance from one another, the comment rendering320can generate a cluster element326in place of the clustered commenting features330. To view the commenting features, the user can zoom in, or alternatively, select the clustering element to view its components. In some examples, the input interface310can also respond to view input that adjusts the zoom level by dynamically generating and adjusting a cluster element that reflects the number of commenting features330which are provided with the clustered element. Other information that can be provided can include, for example, information about the sources (e.g., authors) of the commenting features and the states of the commenting features, either individually or in aggregate.

Commenting Feature Examples

FIG.4AthroughFIG.4Eillustrate example interfaces on which a commenting feature is rendered on a canvas, according to one or more embodiments.FIG.4FthroughFIG.4Jillustrate an example interface on which another example commenting feature is provided, where the commenting feature includes content provided by multiple collaborating users, according to one or more embodiments.FIG.4Killustrates implementation of a clustered commenting feature, according to one or more embodiments.FIG.4Lillustrates a comment sidebar which can be provided to render comments that appear in the canvas or in connection with the particular design, according to one or more embodiments.FIG.4Millustrates a simulation (or “prototype”) rendering of a graphic design under edit, along with the comment side bar, according to one or more embodiments. In describing examples ofFIG.4AthroughFIG.4M, reference is made elements ofFIG.1AthroughFIG.1CandFIG.3, to illustrate suitable components for providing functionality as described.

With reference toFIG.4A, an interface400includes a canvas402on which a graphic design425is provided. The graphic interface425can be created by one or more user operating computing devices10,12that utilize an interactive graphic design system, such as described withFIG.1AthroughFIG.1C. In such collaborative environments, individual users operating computing devices10,12can view and comment on aspects of the graphic design425, by, for example, (i) creating a new commenting feature; and/or (ii) interacting with existing commenting feature(s) (including commenting features created by other users). The graphic design425can include multiple design elements (e.g., shaped elements), each with a corresponding set of attributes (e.g., text, filling, shape, etc.). In an example shown, a pin component408of the commenting feature410is provided on the canvas402. The pin component408can be associated or linked with a pin location, such as design element409. When the design element409is moved or resized, the pin component408can also be moved to maintain the relative position between the pin component408and the linked design element409. Further, the pin component408indicates the presence of comments which the user can view. The pin component408can include attributes that indicate a source (or author) or other information about a comment carried by the commenting feature410. In an example shown, the pin component408includes an avatar or other identifier of the comment carried by the commenting feature410.

The interface400can include design tools (not shown) to enable the user to create and edit design elements, as well as commenting features. Further, as shown, the interface400can display a DSR representation405of the graphic design425where, in some examples, the commenting feature410is identified in association with a design element of the pin location.

FIG.4Billustrates an enlarged and isolated view of the pin component408ofFIG.4A. The pin component408of commenting feature410can be associated with a pin location (e.g., design element on the canvas402), which may be specified (at least initially) by the commentator. The pin component408can be shaped to visually indicate the associated pin location of the commenting feature410. For example, a corner413of the pin component408can be tapered or pointed to indicate a particular pin location. In some variations, the pin location of the pin component408can be moved by input from a collaborator.

In examples, the pin component408includes multiple configurable elements to indicate additional information about the commenting feature. For example, the pin component408can include a source identifier415(e.g., avatar), to indicate an author of a comment included with the commenting feature. As an addition or variation, the source identifier can represent an author of a most recent comment or of the oldest unread comment.

In a collaborative environment, some examples provide for the source indicator415can indicate visual identifiers (e.g., photo images, avatars) for one or multiple users that collaborate on a design that is rendered on the canvas402. In this way, the source identifier415communicates to users an identifier as to the author or sources of the comments carried by the commenting feature410. Additionally, the visual source indicator415can account for users that have replied to the content in the comment body element418(SeeFIG.4CthroughFIG.4E) of a specific commenting feature410. In some implementations, the commenting feature410can carry comments (e.g., from multiple underlying records133, from thread with comments from multiple users, etc.) from multiple users, in which case the pin component408can include a source identifier415that identifies multiple sources. For example, the source identifier415can identify a single commentator of commenting feature410using a corresponding user identifier (e.g., profile picture), or multiple commentators by displaying multiple identifiers, where each identifier represents a corresponding author of one of the comments carried in the comment body element418. Still further, in other variations, the pin component408can include a number, to indicate a number of comments or sources of comments carried by the commenting feature410.

Further, in examples shown, the pin component408can use highlighting, shading or other visual cues (e.g., modulating elements) to indicate state indicators, where state indicators indicate corresponding states of the commenting feature410. The states of the commenting feature410can include, for example, a view state, resolution state and/or selection state. The view state can reflect whether the user has opened or previewed the comment body element of the commenting feature410. The resolution state can reflect whether an issue raised by a comment carried with the commenting feature has been resolved. The selection state can correspond to whether the user has selected to view or preview the comment body of the commenting feature410.

The state indicators, source indicator415and other indicators of the pin component408enable the user to view information about the commenting feature410(e.g., view state, resolution state, etc.), while the commenting feature410is maintained in a minimal state on the canvas402. In the minimal state, for example, the commenting feature410is rendered without a comment body element418(seeFIG.4CthroughFIG.4E). In some examples, the pin component408can provide a view state indicator414that is in the form of, for example, a ring, banner or other element integrated or associated with the pin component408. In a collaborative implementation, the view state can be specific to individual users, meaning each user who views the canvas402is provided the commenting feature410with view state indicators that indicate whether the particular user previously opened, viewed, or read the corresponding comment body. In variations, the view state can indicator414can reflect a view state that is the same for all users of the canvas402. In such case, when one user views previews or opens the comment body element418of the commenting feature410, the view state indicator414changes for all users to reflect that the comment body element418was previously opened, viewed or read.

As an addition or variation, in examples, the view state indicator414can indicate whether the commenting feature410has been updated since the previous instance when the commenting feature was rendered as read or resolved. In some variations, a user's interaction with the commenting feature410may be reflected by the view state indicator414, specifically as rendered on the interacting user's computing device. Thus, in a collaborative environment, the commenting feature410may be rendered on one user's computing device so that the view state indicator414reflects a read state, while it is rendered for other users in an unread state. While some examples provide for the view state indicator414to 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, the user views and responds to the comment, and (ii) partially viewed state, where the view state indicator414indicates that one or more users who collaborate with the design have not viewed the content of the commenting feature.

In examples, as pertaining to the view state indicator414, a user can provide one or multiple types of input to open, view or read the comment body418of commenting feature410. A user can provide a first input (e.g., left click) to open the comment body element418, resulting in the view state of the commenting feature410to reflect the commenting feature (or the underlying comment record represented by the commenting feature410) as being “read”. As an addition or variation, the user can provide a second input (right click) to render content from the comment body element418, while maintaining or changing the view state of the commenting feature410to “unread”.

In addition, the source indicator415of the commenting feature410can indicate a source of the comment record(s)133that is indicated by the commenting feature. In a collaborative environment, the source indicator415can indicate visual identifiers (e.g., photo images, avatars) for one or multiple users that collaborate on a design that is rendered on the canvas402. In this way, the source identifier415communicates to users an identifier as to the author or sources of the comments carried by the commenting feature410. Additionally, the visual source indicator415can account for users that have replied to the content in the comment body element418of a specific commenting feature410. In some implementations, the commenting feature410can carry comments (e.g., from multiple underlying records133, from thread with comments from multiple users, etc.) from multiple users, in which case the pin component412can include a source identifier415that identifies multiple sources. For example, the source identifier415can identify a single commentator of commenting feature410using a corresponding user identifier (e.g., profile picture), or multiple commentators by displaying multiple identifiers, where each identifier represents a corresponding author of one of the comments carried in the commenting feature.

With reference toFIG.4C, the interface400depicts the commenting feature410in an open state. In the open state, the comment body element418of the commenting feature410is rendered on the canvas402, to enable the user to view and interact with a comment419carried by the comment body element418. The pin component408can remain on the canvas402, at the pin location (e.g., linked to the design element409). Further, the pin component408can change state to reflect, for example, the comment body element418being viewed (or in a viewed state). The change in state can be reflected by the view state indicator414, where for example, a coloring or sharing of a perimeter of the pin component408is changed.

FIG.4Dillustrates an enlarged and isolated view of the commenting body element418ofFIG.4C. InFIG.4D, the comment body element418includes a comment419from a single commentator, where the commentator is depicted by source identifier415. In some variations, the comment body element418can include other interactive features, such as an input feature (not shown) to enable the user to provide input to mark resolution of an issue raised by the comment419.

FIG.4Eillustrates a variation of the comment body element418. In an example shown, the comment body element418can be colored or shaded to reflect an action where the user previews (rather than opens) the comment body element418. When in the preview mode, the comment body element418renders a comment from a given user without adjusting a view state of the commenting feature410. Further, in some variations, the comment body element418can render a preview of one or more comments without requiring the user to toggle into a comment entry mode.

With reference toFIG.4F, the interface400depicts an example in of the commenting feature410in a closed state, after the commenting feature410has been updated to include comments or other input from multiple users (e.g., four), according to one or more embodiments. In an example shown, the commenting feature410carries comments from multiple users of a collaborative session. In some examples, each user comment can be stored as part of a corresponding comment record133, where each comment record133is associated with the canvas location. In examples, the canvas location corresponds to a coordinate (or range of coordinates, such as a region of the canvas122) on the canvas. In variations, canvas location corresponds to a location of a design element. Alternatively, at least some of the comments indicated by commenting feature410can be combined into a given comment record133.

The With further reference toFIG.4F, the pin component408remains linked to the design element409. Further, the pin component408can include data elements that identify some of the sources/authors who provided an input. The additional comments can also change one or more states associated with the commenting feature.

FIG.4Gillustrates an enlarged and isolated view of the pin component408ofFIG.4F. The pin component408can include one or more multiple source identifiers. In an example shown, the pin component408can include a first identifier415afor a first source, a second identifier415bfor a second source (e.g., second commentator), and a number representing additional commentators415c. Numerous variations may be possible, such as a number to display total number of commentators. Further, one or more state indicators414of the pin component408can change to reflect, for example, that a newly inserted comment is unread, or an issue presented with one or more new comments is unresolved.

FIG.4Hillustrates the interface400with the commenting feature410, as represented byFIG.4F, in the open state. In the open state, the commenting body element418can be rendered in proximity or near to the pin component408. The pin component408can be linked to the design element409. In the open state, the commenting body element418can display comments from multiple users who collaborate on the graphic design425. The commenting body element418can also provide an input interface to enable the user to interact with comments of other users, and to provide their own comment.

FIG.4Iillustrates an enlarged and isolated view of the commenting body element418in an open state, as shown inFIG.4H. InFIG.4I, the commenting body element418can include multiple comments419from different authors. Further, the source indicators415a,415b,415cfor the comments can be indicated by the commenting body element418. In some variations, the commenting body element418can enable scrolling functionality that lets users review and interact with the comments of the commenting body element418. the commenting body element418can, for example, provide interactive features to enable the user to dismiss (or accept, reject, etc.) issues raised by comments of other users. One viewed, the view indicator414of the pin component408can be altered or changed to reflect a change in the state of the commenting body element418, to reflect, for example, the state of the commenting feature410as being read.

FIG.4Jillustrates a variation of the commenting body element418in a preview state. In the preview state, the user can view, for example, one or more of the comments419of the comment body element418. When the commenting body element418is previewed, the view state indicator414of the408can remain unchanged to, for example, reflect an unread state.

With reference toFIG.4C,FIG.4FandFIG.4H, the comment body element418can be moved over the canvas402to enable the user to view the comments419and work on specific aspects of the graphic design425at the same time. In this way, the comment body element418can enable the user to use a single field of vision, directed at the canvas, to implement feedback from the comment419of the commenting feature, with respect to specific aspects of the graphic design425.

FIG.4Killustrates a comment sidebar450which can be provided to render comments that appear in the canvas or in connection with the particular design, according to one or more embodiments. Each sidebar comment452can link to, or be representative of a commenting feature430, where the corresponding commenting feature430may be rendered or renderable on the canvas402with a corresponding comment component412or comment body element418. In some examples, the comment sidebar450can be displayed when the rendering engine120is operated in the comment entry mode. The comment sidebar450can include search and filter features455to enable a user to search for comments by, for example, keyword, source or author, metadata (timestamp) or other identifiers of individual comments.

FIG.4Lillustrates an implementation in which the commenting component300generates a clustering feature460in place of multiple commenting features, according to one or more embodiments. In examples, the pin locations of the commenting features410(seeFIG.4AthroughFIG.4L) overlap in display location (based on the respective pin locations), based on the zoom factor of the respective user computing device. When the display distance of the pin locations is less than a threshold, the multiple commenting features can be deemed to overlap. The commenting features410can be rendered to appear as one clustered commenting feature460. The clustered commenting feature460can include a pin location that is based on the pin locations of the constituent commenting features435. Further, the cluster commenting feature460can include state information, source information and/or other indicators that indicate information about the constituent commenting features, including the sources for the individual commenting features. The source information for individual comment (or corresponding comment record) for the rendered commenting features410. Similarly, when graphic design425is subject to a zoom (magnification) operation, the clustered commenting feature460can be separated out into multiple commenting features, such as described withFIG.4AthroughFIG.4J.

FIG.4Millustrates a simulation (or “prototype”) rendering of a graphic design under edit, along with the comment side bar, according to one or more embodiments. As shown, the comment sidebar can be provided in connection with a prototype rendering of the design under edit, to enable users to view comments along with features of the graphic design that is being simulated. The sidebar comments can be hidden or displayed, depending on implementation and setting.

FIG.4Nillustrates another example interface on which commenting features are provided, according to one or more embodiments. InFIG.4N, a graphic design470is rendered on a canvas472. A user can use the commenting component300to create a commenting feature474at a first pin location, where the first pin location is associated with a design element475. As an addition or alternative, the user can drag (or provide other input) the commenting feature474over a region477of the canvas472. Once dragged, the commenting feature474is associated with the region477. In an example shown, the commenting feature474can be associated with the design element475and the region477. In some implementations, the commenting feature474is copied so as to have two pin locations, corresponding to locations of the graphic element475and also the canvas region477. As another addition or variation, the user can select the region477, and associate the commenting feature to the region477.

Network Computer System

FIG.5illustrates a computer system on which one or more embodiments can be implemented. A computer system500can be implemented on, for example, a server or combination of servers. For example, the computer system500may be implemented as the network computing system150ofFIG.1AthroughFIG.1C, and further utilized by a plugin management system200ofFIG.2.

In one implementation, the computer system500includes processing resources510, memory resources520(e.g., read-only memory (ROM) or random-access memory (RAM)), one or more instruction memory resources540, and a communication interface550. The computer system500includes at least one processor510for processing information stored with the memory resources520, such as provided by a random-access memory (RAM) or other dynamic storage device, for storing information and instructions which are executable by the processor510. The memory resources520may also be used to store temporary variables or other intermediate information during execution of instructions to be executed by the processor510.

The communication interface550enables the computer system500to communicate with one or more user computing devices, over one or more networks (e.g., cellular network) through use of the network link580(wireless or a wire). Using the network link580, the computer system500can communicate with one or more computing devices, specialized devices and modules, and/or one or more servers.

In examples, the processor510may execute service instructions522, stored with the memory resources520, in order to enable the network computing system to implement the network service152and operate as the network computing system150in examples such as described withFIG.1AthroughFIG.1C.

The computer system500may also include additional memory resources (“instruction memory540”) for storing executable instruction sets (“IGDS instructions545”) which are embedded with web-pages and other web resources, to enable user computing devices to implement functionality such as described with the IGDS100.

As such, examples described herein are related to the use of the computer system500for implementing the techniques described herein. According to an aspect, techniques are performed by the computer system500in response to the processor510executing one or more sequences of one or more instructions contained in the memory520. Such instructions may be read into the memory520from another machine-readable medium. Execution of the sequences of instructions contained in the memory520causes the processor510to perform the process steps described herein. In alternative implementations, hard-wired circuitry may be used in place of or in combination with software instructions to implement examples described herein. Thus, the examples described are not limited to any specific combination of hardware circuitry and software.

User Computing Device

FIG.6illustrates a user computing device for use with one or more examples, as described. In examples, a user computing device600can correspond to, for example, a workstation, a desktop computer, a laptop or other computer system having graphics processing capabilities that are suitable for enabling renderings of design interfaces and graphic design work. In variations, the user computing device600can correspond to a mobile computing device, such as a smartphone, tablet computer, laptop computer, VR or AR headset device, and the like.

In examples, the computing device600includes a central or main processor610, a graphics processing unit612, memory resources620, and one or more communication ports630. The computing device600can use the main processor610and the memory resources620to store and launch a browser625or other web-based application. A user can operate the browser625to access a network site of the network service152, using the communication port630, where one or more web pages or other resources605for the network service152(seeFIG.1AthroughFIG.1CandFIG.2) can be downloaded. The web resources605can be stored in the active memory624(cache).

As described by various examples, the processor610can detect and execute scripts and other logic which are embedded in the web resource in order to implement the IGDS100(seeFIG.1AthroughFIG.1C). In some of the examples, some of the scripts615which are embedded with the web resources605can include GPU accelerated logic that is executed directly by the GPU612. The main processor610and the GPU can combine to render a design interface under edit (“DIUE611”) on a display component640. The rendered design interface can include web content from the browser625, as well as design interface content and functional elements generated by scripts and other logic embedded with the web resource605. By including scripts615that are directly executable on the GPU612, the logic embedded with the web resource605can better execute the IGDS100, as described with various examples.

CONCLUSION

Although examples are described in detail herein with reference to the accompanying drawings, it is to be understood that the concepts are not limited to those precise examples. Accordingly, it is intended that the scope of the concepts 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 can be combined with other individually described features, or parts of other examples, even if the other features and examples make no mentioned of the particular feature. Thus, the absence of describing combinations should not preclude having rights to such combinations.