Auto-completion feature for code editors

Abstract

The computer system operates or is capable of operating to maintain data storage containing searchable information for graphic design. The searchable information includes character-based information associated with one or more layers of the graphic design. Upon receiving one or more character inputs, the computer system performs a matching operation to associate the strings with terms and / or values ​​in the character-based information for the one or more layers. The computer system predicts or determines the corresponding line of code inputs based on the terms, values, or combinations of terms and values. The computer system provides the predicted or corresponding line of code inputs to the code editor so that a portion of the line of code inputs is automatically completed with the predicted or corresponding line of code inputs.

Description

Related Application

[0001] This application claims the benefit of priority from U.S. Patent Application No. 18 / 750594 filed on June 21, 2024 and U.S. Provisional Patent Application No. 63 / 522406 filed on June 21, 2023, the entire contents of which are incorporated herein by reference. Technical Field

[0002] Embodiments described herein relate to an automatic completion function for code editors. Background Art

[0003] Software design tools come in many forms and applications. In the field of application user interfaces, for example, software design tools require designers to integrate even aesthetic sensibilities and even legal requirements into the functional aspects of a program, thereby generating a set of pages that form the user interface of an application. For a particular application, designers often have many goals and requirements that are difficult to track.

[0004] Developers are often unfamiliar with the arcane and potentially fine-grained details of graphic design. This unfamiliarity often causes inefficiency for developers, who must carefully review graphic designs while paying attention to details, review annotations from designers, and write code. Although a developer's work can be efficient, the level of detail often involved in graphic design makes the developer's work prone to errors. For example, pixel distances between objects, corner attributes, and other attributes can be difficult to discern without careful attention, and developers can easily misread them. Summary of the Invention Means for Solving the Problems

[0005] This invention relates to the automatic completion of partial line of code input. A data storage is maintained to store searchable information for graphic design. The searchable information may include character-based information, including character identifiers, attributes, and attribute values ​​of layers that constitute the graphic design, with each layer corresponding to an object, a group of objects, or an object of a single type. Each layer may also be associated with a set of attributes, including a character identifier. A string is received via a code editor interface. The string corresponds to a partial line of code input. A matching operation is performed to associate the string with terms and / or values ​​from one or more layers in the layer group. The predicted line of code input is determined based on the corresponding terms and / or values. The predicted line of code input is provided to the code editor, which then automatically completes the partial line of code input with the predicted line of code input. [Brief explanation of the drawing]

[0006] [Figure 1] One or more examples of graphic design systems according to one or more embodiments are illustrated. [Figure 2] An example of a method for performing an auto-completion function of a code editor interface according to one or more embodiments is illustrated. [Figure 3A] An example of a code editor interface for performing an auto-completion function according to one or more embodiments is illustrated. [Figure 3B] An example of a code editor interface for performing an auto-completion function according to one or more embodiments is illustrated. [Figure 4] Another example of a code editor interface for performing an auto-completion function according to one or more embodiments is illustrated. [Figure 5] A computer system on which one or more embodiments may be implemented is illustrated. [Figure 6] A user computing device used in conjunction with one or more of the described embodiments is illustrated. [Modes for carrying out the invention]

[0007] According to the embodiment, data storage is maintained to store searchable information for graphic design. The searchable information may include character-based information, including character identifiers, attributes, and attribute values ​​of layers that constitute the graphic design, with each layer corresponding to an object, a group of objects, or an object of a single type. Each layer may also be associated with a set of attributes, including a character identifier. A string is received via the code editor interface. The string corresponds to a partial line of code input. A matching operation is performed to associate the string with terms and / or values ​​from one or more layers in the layer group. The predicted line of code input is determined based on the corresponding terms and / or values. The predicted line of code input is provided to the code editor, which automatically completes the partial line of code input with the predicted line of code input.

[0008] In the embodiment, a line of code input corresponds to a term, a value, or a combination of a term and / or a value.

[0009] One or more embodiments described herein specify that the methods, techniques, and operations performed by the computing device are performed by program or as computer execution. As used herein, “by program” means by the use of code or a set of computer-executable instructions. These instructions may be stored in one or more memory resources of the computing device. The steps performed by program may or may not be automatic.

[0010] One or more embodiments described in this document may be executed using a program module, engine, or component. A program module, engine, or component may include a program, a subroutine, a part of a program, or a software or hardware component capable of performing one or more described tasks or functions. As used in this document, a module or component may reside on a hardware component independently of other modules or components. Alternatively, a module or component may be a common element or process of other modules, programs, or machines.

[0011] Some embodiments described herein may typically require the use of a computing device having 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, mobile phones or smartphones, tablets, wearable electronic devices, laptop computers, printers, digital picture frames, network equipment (e.g., routers), and tablet devices. Memory, processing resources, and network resources may all be used in connection with the establishment, use, or execution of any embodiment described herein (including in connection with the execution of any method or the implementation of any system).

[0012] Furthermore, one or more embodiments described herein may be implemented using instruction sets executable by one or more processors. These instructions may be stored on computer-readable media. The machines shown or described in the following figures provide examples of processing resources and computer-readable media on which instruction sets for implementing embodiments of the present invention may be stored and / or executed. In particular, many of the machines shown in embodiments of the present invention include a processor and various forms of memory for holding data and instruction sets. Examples of computer-readable media include permanent memory storage devices such as hard drives on personal computers or servers. Other examples of computer storage media include portable storage devices such as CD or DVD drives, flash memory (e.g., stored in smartphones, multifunction devices, and / or tablets), and magnetic memory. Computers, terminals, and networkable devices (e.g., portable devices such as mobile phones) are all examples of machines and devices that utilize a processor, memory, and instruction sets stored on computer-readable media. Furthermore, embodiments may be implemented in the form of computer programs or in the form of computer-readable storage media on which such programs can be stored.

[0013] System Description Figure 1 illustrates a graphic design system according to one or more embodiments. As shown in Figure 1, the graphic design system 100 (GDS100) can be implemented in any one of a number of different computing environments, including device-side applications, network services, and / or collaborative platforms. In one embodiment, the GDS100 may be implemented using a web-based application 80 running on a user device 10. In another embodiment, the GDS100 may be implemented using a dedicated web-based application. In addition or alternatively, one or more components of the GDS100 may be implemented as a distributed system, where the processes described in various embodiments run on both a network computer (e.g., a server) and the user device 10.

[0014] In this embodiment, the GDS100 includes a process executed by a web-based application 80 installed on the user device 10. The web-based application 80 can execute scripts, code, and / or other logic (program elements) to implement the functions of the GDS100. In some variations, the GDS100 may be implemented as part of a network service, in which case the web-based application 80 communicates with one or more remote computers (e.g., servers used for the network service) to execute the processes of the GDS100.

[0015] In the embodiment, a web-based application 80 is included for loading processes and data for implementing the GDS 100 onto a user device 10. The GDS 100 may include a drawing engine 120 that enables the user to generate, edit, and update graphic design files. The GDS 100 may also include a code integration subsystem that combines or integrates programming code, data, assets, and other logical code for developing graphic designs as part of a manufacturing environment.

[0016] In some embodiments, the web-based application 80 reads program resources from a network site to implement the GDS 100. Alternatively, the web-based application 80 may read some or all of the program resources from local resources (e.g., local memory located on the computing device 10). The web-based application 80 may also access various types of datasets when providing the functionality described in the GDS 100. These datasets may correspond to files and libraries that are stored remotely (e.g., associated with an account on a server) or locally.

[0017] In one embodiment, a user can run a web-based application 80 to access a network site where program resources are read and executed to realize GDS100. The user can start a session to run GDS100, view, generate, and edit graphic designs, and generate program code to execute the graphic designs in the manufacturing environment. In some embodiments, the user may correspond to a designer who creates, edits, and refines graphic designs for later use in the manufacturing environment.

[0018] In some embodiments, the web-based application 80 may correspond to commercially available browsers, such as Google Chrome (developed by Google), Safari (developed by Apple), and Internet Explorer (developed by Microsoft). In such embodiments, the GDS100 process may be implemented as scripts and / or other embedded code downloaded by the web-based application 80 from a network site. For example, the web-based application 80 executes code embedded in a web page to run the GDS100 process. The web-based application 80 may also execute scripts to load other scripts and program resources (e.g., libraries) from network sites and / or other local or remote sites. For example, the web-based application 80 may execute JAVASCRIPT® embedded in an HTML resource (e.g., a web page configured according to HTML5.0 or other versions specified in standards published by the W3C or WHATWG consortium). In other variations, the GDS100 may be implemented by using a dedicated application such as a web-based application.

[0019] The GDS100 may include a process represented by a program interface 102, a drawing engine 120, a design interface 130, a code interface 132, and program code resources 140. Depending on the embodiment, the components may operate on a user device 10, a network system (e.g., a server or a combination of servers), or the user device 10 and a network system (e.g., as a distributed system).

[0020] The program interface 102 includes a process for transmitting and receiving data for implementing components of the GDS 100. In addition, the program interface 102 may be used to read program resources and a data set group that collectively constitutes the workspace file 155 of a user or a user's account from a local or remote source. In an embodiment, the workspace file 155 includes one or more data sets (represented as graphic design data sets 157) representing corresponding graphic designs that can be rendered by the rendering engine 120. The workspace file 155 may include one or more graphic design data sets 157 that collectively define a design interface. The graphic design data set 157 may be configured as one or more nodes arranged hierarchically. Each node may be associated with a corresponding set of characteristics and characteristic values that collectively provide information defining or describing the design element represented by the node. Additionally or alternatively, the graphic design data set 157 may be configured to define the graphic design 125 as a group of layers, each layer corresponding to an object (e.g., frame, image, text), an object group, or an object of a specific type. In an embodiment, each layer corresponds to an individual portion of the graphic design 135 that includes a set of design elements or objects. Also, in some embodiments, the graphic design data set 157 may be configured to structure the graphic design 135 as a group of cards, pages, or sections.

[0021] In one embodiment, the program interface 102 also loads program resources, including an application framework for implementing the design interface 130. The design interface 130 can utilize a combination of local browser-based resources and / or network resources (e.g., the application framework) provided by the program interface 102 to generate interactive functions and tools that can be integrated with the expression of the graphic design 135 on the canvas. The design interface 130 can enable the user to view and edit aspects of the graphic design. Thus, the design interface 130 can be implemented as a functional layer that integrates with the canvas on which the graphic design 135 is provided.

[0022] The design interface 130 can detect and interpret user input, for example, based on the input location and / or input type. The input location can refer to the canvas or screen location for, for example, the start and / or end positions of a tap or continuous input. The input type corresponds to one or more types of inputs that occur with respect to the canvas or design elements drawn on the canvas. Such inputs can select and manipulate design elements or parts thereof in correlation with the canvas or screen location. Based on the canvas or screen location, user input can also be interpreted as input for selecting a design tool (for example, which may be provided by the application framework). In embodiments, the design interface 130 can determine the screen location of a user input (e.g., a click) using a corresponding canvas reference. Furthermore, the design interface 130 can interpret user input operations based on the location of detected inputs (for example, the location of an input indicating the selection of a tool, an object drawn on the canvas, or an area of ​​the canvas), the frequency of inputs detected over a specific period (for example, double-clicks), and / or the start and end positions of an input or a series of inputs (for example, the start and end positions of clicks and drags), as well as various other input types that the user can specify via one or more input devices (for example, right-clicks, screen taps, etc.).

[0023] In some embodiments, the rendering engine 120 and / or other components utilize logic accelerated by a graphics processing unit (GPU), for example, logic provided by a WebGL (Web Graphics Library) program that executes a Graphics Library Shader Language (GLSL) program run on the GPU. In variations, the web-based application 80 may be implemented as a dedicated web-based application optimized to provide the functions described in various examples. Furthermore, the web-based application 80 may vary based on the type of user equipment including basic software used by the user equipment 10 and / or the form factor of the user equipment (for example, desktop computers, tablets, portable devices, etc.).

[0024] In some embodiments, the rendering engine 120 renders the graphic design 135 on the design interface 130 using the graphic design dataset 157, and the graphic design 135 includes graphic elements, attributes, and attribute values. Each attribute of a graphic element may include an attribute type and an attribute value. For an object, attribute types include shape, dimension (or size), layer, type, color, line width, character size, character color, font, and / or other visual characteristics. Depending on the embodiment, the attributes represent characteristics of a two-dimensional or three-dimensional design. In this way, attribute values of individual objects may define, for example, the size, color, positioning, hierarchy, and visual characteristics of content of elements drawn as part of a design.

[0025] The graphic design 135 can be composed of multiple screens (e.g., a manufacturing environment computer screen), multiple pages (e.g., each page contains a canvas on which the corresponding graphic design is drawn), and multiple sections (e.g., each screen contains multiple pages or screens). The user interacts with the graphic design 135 via the design interface 130, viewing and editing aspects of the graphic design. The design interface 130 can detect user input, and the drawing engine 120 can update the graphic design 135 in response to that input. For example, the user can specify inputs that change the display of the graphic design 135 (e.g., zoom in or out of the graphic design), and in response, the drawing engine 120 updates the graphic design 135 to reflect the changes in the display. The user can also edit the graphic design 135. The design interface 130 can detect input, and the drawing engine 120 can update the graphic design dataset 157 representing the updated design. In addition, the drawing engine 120 can update the graphic design 135, and changes made by the user are immediately displayed to the user.

[0026] collaborative environment In this embodiment, GDS100 may be implemented as part of a collaborative platform, where graphic designs can be viewed and edited by multiple users operating separate computing devices in various locations. As part of the collaborative platform, when a user edits a graphic design, the changes made by the user are reflected in real time in instances of the graphic design on the computing devices of other collaborating users. Similarly, when other collaborators make changes to the graphic design, those changes are reflected in the graphic design dataset 157 in real time. The drawing engine 120 updates the graphic design 135 in real time, reflecting the changes in the collaborators' graphic designs.

[0027] In this embodiment, when the drawing engine 120 makes a change to the graphic design dataset 157, the corresponding change data 111 representing that change may be sent to the network system 150. The network system 150 can maintain the network-side representation 151 of the graphic design 135 by performing one or more synchronization processes (represented by synchronization components 152). In response to receiving the change data 111 from the user device 10, the network system 150 updates the network-side representation 151 of the graphic design 135 and sends the change data 111 to the user device 10 of another collaborator. Similarly, when another collaborator makes a change to an instance of the graphic design on their device, the corresponding change data 111 may be sent from the collaborator's device to the network system 150. The synchronization component 152 updates the network-side representation 151 of the graphic design 135 and sends the corresponding change data 121 to the user device 10, updating the graphic design dataset 157. The drawing engine 120 then updates the graphic design 135.

[0028] Code generation In the embodiment, GDS100 is a process represented by a program code resource 140, which includes a process for generating code data for a code representation 145 of a graphic design. The program code resource 140 may include a process for accessing a graphic design dataset 157 in a workspace file 155 to generate code data representing elements of the graphic design. The generated code data may include a set of manufacturing environment executable instructions (e.g., "JavaScript", HTML, etc.) and / or information (e.g., CSS (Cascading Style Sheets)), resources (e.g., elements in a library), and other types of data.

[0029] In some embodiments, the graphic design dataset 157 is configured to define multiple layers, each layer corresponding to one of an object, an object group, or a specific type of object. In specific examples, layer types may include frame objects, groups of objects, parts (i.e., objects consisting of multiple objects that reflect states or other variations between instances), text objects, images, constructive logic that enables layout or positional linking between multiple objects, and / or other default types of elements. For each layer of the graphic design, the program code resource 140 generates a set of code data associated with or linked to the design element. For example, each layer of the graphic design dataset 157 may include an identifier, and the program code resource 140 may generate a set of code data associated with the identifier of that layer for each layer. The program code resource 140 may generate the code representation 145 such that the code line entries and elements of the code representation 145 (e.g., lines of code, sets of executable information, etc.) are associated with a specific layer of the graphic design 135. The association may map a line of code entry in the code representation 145 to a corresponding design element (or layer) in the graphic design 135 (represented by the graphic design dataset 157). Thus, each line of code in the code representation 140 may be associated with a specific layer or design element in the graphic design. Similarly, in the embodiment, each layer or design element in the graphic design 135 may be associated with a segment in the code representation 145.

[0030] Code representation drawing In some embodiments, the code interface 132 renders an organized representation of the code representation 145 for the production environment rendering of the graphic design 135. For example, the code interface 132 may visually divide the representation of the code representation 145 into separate segments (where production environment executable code instructions are displayed; for example, separate areas of HTML and CSS code). The code interface 132 may also include segments that visually identify the assets used in the graphic design 135 (for example, design elements that are part of a library of user-related accounts).

[0031] The code interface 132 can implement a combination of local browser-based resources and / or network resources (e.g., application frameworks) provided by the program interface 102, and can generate a set of interactive functions and tools to display the code representation 145. As illustrated in the example below, the code interface 132 can make elements of the code representation 145 individually selectable as input, allowing the user to select or navigate to design elements represented on the design interface 130. For example, the user may select one or more of the following as input: (1) a line of code, (2) a portion of a line of code corresponding to an attribute, or (3) a portion of a line of code reflecting an attribute value. The user can also select program code data displayed in separate areas, different types of program code (e.g., HTML or CSS), assets, and other program data elements.

[0032] Select the code and view the design elements. The code interface 132 can detect user input and select code elements. Upon detecting user input to a specific code element, the code interface 132 can identify the design elements (or layers) associated with that code element and notify the design interface 130. For example, the code interface 132 can identify a specific layer indicated by the user's selection input. The code interface 132 can then display the identified layer or design element to the design interface 130, causing the design interface 130 to highlight, navigate, or prominently display the design elements associated with the selected code element. In some examples, the design interface 130 can display the design elements associated with the code element selected via the code interface 132 in visual isolation or separated from other design elements of the graphic design. In this case, the associated design elements may be displayed within the window of the design interface 130, while other design elements of the graphic design are hidden. In this way, when a user interacts with the code interface 132, the user can easily distinguish the associated design elements from other design elements of the graphic design.

[0033] Select the code and navigate to the design element. Furthermore, the selection of code elements in the code interface 132 can lead to navigation in the design interface 130 to a specific set of design elements identified by the selected code elements. For example, the code interface 132 can identify a layer selected by user input, and the design interface 130 can navigate the display of the graphic design 135 to the canvas location where the relevant design elements reside. In addition, or alternatively, the design interface 130 can focus on specific design elements related to the design elements identified by navigating by changing the zoom level of the display.

[0034] Synchronize the design interface and the code interface. In the embodiment, the design interface 130 and the code interface 132 may be synchronized with respect to the content displayed in each interface. For example, the code interface 132 may be provided as a window displayed alongside or together with the design interface 130 window. In one embodiment, the code interface 132 displays code elements that constitute part of a code representation, and each code element is associated with a layer or design element that has a corresponding identifier. The design interface 130 then uses the layer / design element identifier to draw design elements of the graphic design 135 that match the code elements displayed by the code interface 132.

[0035] Furthermore, GDS100 can perform the process of continuously linking the content of the design interface 130 with the content of the code interface 132. For example, if a user scrolls through code data displayed by the code interface 132, the design interface 130 can navigate or center the representation of the graphic design 135 to reflect the code elements displayed in the code interface 132. As described, the design interface 130 and the code interface 132 can utilize a common set of identifiers for layers or design elements provided by the graphic design dataset 157.

[0036] Modify graphic designs via a code interface. In this embodiment, a user of the device 10 can modify the graphic design 135 by changing the code representation 145 using the code interface 132. For example, the user can select a code segment of the representation 145 displayed by the code interface 132 and change an attribute, attribute value, or other aspect of the code element. Inputs that modify the code representation 145 can automatically modify the corresponding design elements of the graphic design 135. The design interface 130 can identify and modify the layer or design element of the modified code segment, and these changes can be reflected in the graphic design dataset 157. The drawing engine 120 can then update the representation of the graphic design 135 to reflect the changes made by the code interface 132. In this way, developers can make real-time changes, for example, by adding, deleting, or modifying layers or design elements (for example, by changing attributes or attribute values) in the design interface.

[0037] View and modify code elements using the design interface. In addition, in the embodiment, the user can select design elements of the graphic design 135 by interacting with the design interface 130. For example, the user can select or modify layers of the graphic design 135, and the design interface 130 can display the corresponding segments of the layers in the code representation 145 via the code interface 132. In addition, or alternatively, the code interface 132 can highlight or visually distinguish code elements (e.g., lines of code) from the remainder of the code representation 145 that are related to the identified design element. In this way, developers can easily examine the code elements generated for a design element of interest by selecting a design element or a layer corresponding to the design element in the design interface 130 and then viewing the code generated for the selected element or layer in the code interface 132.

[0038] In addition, in this embodiment, the user can edit the graphic design 135 through interaction with the design interface 130. The drawing engine 120 can respond to input by updating the graphic design 135 and the graphic design dataset 157. When the graphic design dataset 157 is updated, the program code resource 140 can update the code representation 145 to reflect the changes. The code interface 132 can also highlight, make prominent, or otherwise visually indicate code elements that have been changed as a result of changes made to the graphic design 135 via the design interface 130.

[0039] Code editor auto-completion A code editor is equivalent to a human interface optimized to allow a user to write and edit program code (e.g., executable programs, routines, etc.). In some examples, GDS100 includes resources that enable the use of a code editor 20 to leverage data from a graphic design workspace file 155. The code editor 20 may be used to create and / or edit a code representation 145 for executing a graphic design 135 in a manufacturing environment.

[0040] In one embodiment, the program code resource 140 may include a code generator that generates code and data representing the graphic design of the workspace file 155. The program code resource 140 may also include an application programming interface (API) 139 that communicates with an external source that provides, for example, a code editor 20 to a user of the GDS 100. In one embodiment, automatically generated code may be used to generate a code representation 145, and the code editor 20 may be used to update the code representation 145. In a variation, the code representation 145 is created and updated by a developer using a code interface 132.

[0041] In variations, the code editor 20 may be provided to the GDS 100, for example, on the user device 10. Furthermore, updates to the code representation 145 may be performed based on changes made in the code editor 20.

[0042] In some cases, the code editor 20 may be implemented or provided by a remote source. API 139 can make available a communication channel through which various types of events are monitored and detected. For example, changes to the code representation 145 may be detected and used to update the local instance of the code representation 145 on the user device 10. In addition, user interaction with the code editor 20 may be detected by API 139. For example, individual key presses 137 by a user interacting with the code editor 20 may be detected by API 139.

[0043] In some examples, the program code resource 140 may provide a search component to the code editor 20. The search component 142 may respond to a certain type of input, such as a single character input 137 or a series of character inputs 137. Upon receiving one or more character inputs 137, the search component 142 performs a search or matching operation to identify character data related to the graphic design and returns a response to the code editor 20. As illustrated in some examples, the search component 142 executes one or more search routines to find one or more character inputs 137 corresponding to a portion of the code line input. Upon finding one or more character inputs 137 (or a sequence thereof), the search component 142 performs a matching operation to identify one or more corresponding character inputs as a search result 141. The search result 141 may include one or more suggestions to the code editor 20, each suggestion automatically completing part or the remainder of the code line input that was in progress.

[0044] In some examples, the GDS100 includes a searchable data storage 159 based on or representing a graphic design dataset 157. For example, the searchable data storage 159 is based on or equivalent to a graphic design dataset 157 optimized for alphanumeric searches. For example, at least a portion of the searchable data storage 159 may be configured as an index that maps a set of character inputs to character-based attributes and layer descriptors (provided by the graphic design dataset 157, which is a structured representation of the graphic design 135). The searchable data storage 159 may also be updated simultaneously with updates to the graphic design dataset 157 so that the searchable data storage 159 includes recent edits of the graphic design 135.

[0045] In some examples, the searchable data storage 159 identifies terms and / or values ​​of character-based information related to layers, nodes, or segments of the graphic design 135. Terms may include character identifiers (e.g., object names), characteristic (or attribute) identifiers, and other character-based information that can be determined from the graphic design dataset 157 (e.g., node or layer names and descriptors), while values ​​may include field or characteristic values. Identified terms and / or values ​​may be associated with code fragments, which are determined and / or automatically generated from, for example, the code repository 145. In variations, identified terms and / or values ​​are concatenated to data to generate code fragments. Thus, in the examples, a code fragment contains one or more lines or sub-lines of code that are (or may be) integrated with the code representation 145 of the graphic design 135. In this way, fragments may be generated to provide executable code portions (e.g., for a production environment) and code that can be compiled with the code representation 145.

[0046] Upon receiving character input (or a series of character inputs), the search component 142 uses the searchable data storage 159 to perform a search operation and identify one or more corresponding terms or values. The corresponding terms and values ​​may be determined from character-based information associated with one or more layers or nodes of the graphic design dataset 157. Each of the corresponding terms or values ​​may also be associated with or linked to one or more code fragments.

[0047] The search component 142 may return search results 141 to the code editor 20 via API 139. Search results 141 may include predicted or corresponding line of code input, which completes at least a portion of the line of code the user was typing (e.g., when typing character input 137). As illustrated in the example, the predicted or corresponding line of code input may refer to or include corresponding identifiers or descriptors of layers in the graphic design 135. In addition, or instead, the predicted or corresponding line of code input may refer to or include attribute values ​​contained in or determined from the graphic design dataset 157. Other descriptors or file-specific information may also be returned by the search operation.

[0048] In addition, or alternatively, the result 141 returned by the search component 142 may include a set of multiple possible code line inputs (i.e., a set of candidate code line inputs). The search component 142 may also be configured to use subsequent character inputs to select a corresponding code line input from a set of candidates. For example, for each character input 137, the search component 142 may perform a search of the searchable data storage 159 and return a set of candidate code line inputs. With each subsequent character input 137, the number of candidate inputs corresponding to a series of character inputs 137 decreases, so the number of candidates in a set may decrease.

[0049] In the embodiment, a set of candidate code lines returned in response to the search result 141 may be ranked to reflect the likelihood that each individual code line of the set of candidates is referred to by the user's character input. The ranking may be based on the term or value corresponding to the character input 137. The ranking may also be based on one or more weights. In some examples, the ranking (or weight) may be based on the count of how many times a particular term or value corresponding to the character input 137 appears in the searchable data storage 159 and / or graphic design dataset 157. In variations, the rank or weight may be based on the relevance of the corresponding term or value. The ranking / weight may also be based on context, such as information relating to the layer or node that the developer is coding. Furthermore, in other variations, the ranking may be based on the code fragment associated with each corresponding term or value. Various other weights and methods may be used to rank a set of candidate inputs for the search result 141.

[0050] method Figure 2 illustrates an example of a method for implementing an auto-completion function for a code editor interface according to one or more embodiments. The method described in the example in Figure 2 can be performed using the components and processes described in Figure 1. Therefore, elements from Figure 1 may be referenced for illustrative purposes.

[0051] In step 210, the searchable data storage 159 is maintained for the graphic design. The searchable data storage may contain character-based information determined from a set of layers or nodes of the graphic design. The character-based information may contain character identifiers, characteristic (or attribute) identifiers, and characteristic or attribute values ​​for a set of layers that make up the graphic design, with each layer corresponding to an object, a group of objects, or an object of one type. Each layer may also be associated with a set of attributes, including character identifiers and other descriptors. In some examples, the searchable data storage 159 may also contain code fragments or references to code fragments.

[0052] In step 220, one or more characters are received via the code editor 20, and the received characters or strings may match or correspond to a partial code line input. In the example, the string may correspond to an incomplete input of a term (e.g., name, identifier, trait type, etc.), a value, a command, and / or an expression.

[0053] In step 230, a matching operation is performed to associate characters or strings with terms, values, or combinations of terms and values ​​in the searchable data storage 159. The corresponding values ​​or combinations of terms and / or values ​​in the layer may correspond to, for example, the identifier (e.g., characteristic / attribute name), descriptor, or attribute / attribute value of that layer.

[0054] In step 240, the corresponding or predicted line of code input is determined based on the corresponding term and / or value, for example, a set of attributes of the corresponding layer. The corresponding line of code input may be associated with the corresponding term and / or value. In variations, the corresponding term and / or value may be used to generate a code fragment. Furthermore, in the example, the corresponding or predicted line of code input may include the corresponding term, value, or combination of term and value. In some variations, the predicted line of code input may include additional characters, terms, or information, for example, non-specific information or terms.

[0055] In step 250, predicted line-of-code inputs are provided to the code editor 20 as selectable features. When selected by the user, the predicted line-of-code inputs can be used to complement the user's incomplete line-of-code inputs. For example, the code repository for executing graphic design 135 in the manufacturing library may be updated. The code repository may also be used to update code representation 145.

[0056] Examples Figures 3A, 3B, and 4 illustrate examples of code editor interfaces that operate to perform code auto-completion functions according to one or more embodiments. The examples in Figures 3A, 3B, and 4 can be performed, for example, using the graphic design system 100 in Figure 1 and / or according to the method described in Figure 2.

[0057] Referring to Figure 3A, the code editor interface 300 receives a character entry input 311 (e.g., 'pr') from the user (e.g., a developer). As described, the search component 142 performs a matching operation, associating the character entry input 311 with a set of candidate entries returned and displayed by the code editor interface. In response to the partial code line input 311, the code editor interface 300 displays a set of candidate code line inputs. The candidate code line inputs may be displayed below or adjacent to the code line input 311, for example, in a panel or space 320. For each candidate code line input, the character entry input 311 may be matched with a term 321 (e.g., 'price', 'product-name', 'placeholder', etc.) that forms part of the corresponding code line input 323. As described in other examples, the candidate code line inputs (or fragments) may be suggestions that influence the user when writing code to run the graphic design 135 in a manufacturing environment. For example, to complete a line of code segment that a user has started writing with character input 137, the user can select a candidate line of code input from a recommended set.

[0058] In the example in Figure 3B, the code editor interface 300 is shown to automatically complete a portion (or fragment) of a line of code input corresponding to, for example, a matched term. In the example shown, the auto-completion function completes code fragment 331 by replacing 'pr' (user input) with 'product'. For example, the user can accept the auto-completion fragment by providing selection input (for example, by the user pressing ENTER or TAB on the keyboard). The terms used in the auto-completion operation may correspond to, for example, layer identifiers in graphic design.

[0059] Referring to Figure 4, the code editor interface 300 receives one or more character inputs from the user (e.g., 'f', 'fo', or 'font'). The search component 142 can associate the character input with any one of a number of candidate terms (e.g., 'font', 'font-family', 'font-size', etc.), where each corresponding term corresponds to, for example, a characteristic type. The search component 142 can identify one or more terms (e.g., strings or identifiers) and attribute-value combinations (e.g., font-size:34px) corresponding to one or more of the identified terms 343. The corresponding candidate terms may include code snippets or lines of code input (or portions thereof) displayed for the user in space 340. The user can select auto-completion by selecting one of the candidates in space 340.

[0060] Network Computer System Figure 5 illustrates a computer system on which one or more embodiments may be implemented. The computer system 500 may be implemented on, for example, a server or a combination of servers. For example, the computer system 500 may be implemented as the network computing system 150 in Figure 1.

[0061] In one embodiment, the 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. The computer system 500 includes at least one processor 510 for processing information stored in memory resources 520 for storing information and instruction sets, such as random access memory (RAM) or other dynamic storage devices, and instruction sets can be executed by the processor 510. The memory resources 520 may also be used to store temporary variables or other intermediate information during instruction execution by the processor 510.

[0062] The communication interface 550 enables the computer system 500 to communicate with one or more user computing devices via one or more networks (e.g., cellular networks) using a network link 580 (wireless or wired). Using the network link 580, the computer system 500 can communicate with one or more computing devices, dedicated devices and modules, and / or one or more servers.

[0063] In this example, the processor 510 may execute a set of service instructions 522 stored in memory resource 520 to enable the network computing system to perform network services and operate as the network computing system 150.

[0064] The computer system 500 may also include additional memory resources (instruction memory 540) for storing executable instructions (GDS instruction set 545) that are embedded in web pages and other web resources so that user computing devices can perform the functions described in GDS 100.

[0065] Thus, the examples described herein relate to the use of a computer system 500 to perform the techniques described herein. In one embodiment, the technique is performed by the computer system 500 in response to a processor 510 executing one or more sequences of one or more instructions stored in memory 520. Such instructions may be read into memory 520 from another machine-readable medium. The execution of the sequence of instructions stored in memory 520 causes the processor 510 to perform the process steps described herein. In another embodiment, wired circuits may be used in place of or in combination with software instructions to perform the examples described herein. Therefore, the examples described herein are not limited to any particular combination of hardware circuits and software.

[0066] User computing device Figure 6 illustrates the user computing device used in one or more of the examples described. In the examples, the user computing device 600 corresponds to, for example, a workstation, desktop computer, laptop, or other computer system that has graphic processing capabilities and is suitable for enabling the drawing of design interfaces and graphic design works. Alternatively, the user computing device 600 may correspond to a portable computing device such as a smartphone, tablet computer, laptop computer, or VR or AR headset.

[0067] In this example, the 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. The computing device 600 can use the main processor 610 and memory resources 620 to store and launch a browser 625 or other web-based applications. The user can use the browser 625 to access network sites of the network computing system 150 using the communication port 630 and download one or more web pages or other resources 605 of the network computing system (see Figure 1). The web resources 605 may be stored in active memory 624 (cache).

[0068] As illustrated in various examples, the processor 610 can detect and execute scripts and other logic embedded in web resources to implement GDS100 (see Figure 1). In some examples, several scripts 615 embedded in web resource 605 may include GPU-accelerated logic that is executed directly by the GPU 612. The main processor 610 and the GPU can work together to draw the design interface (DIUE611) being edited on the display 640. The drawn design interface may include web content from browser 625 and design interface content and functional elements generated by scripts and other logic embedded in web resource 605. By including scripts 615 that can be executed directly on the GPU 612, the logic embedded in web resource 615 performs GDS100 better as described in various examples.

[0069] conclusion While examples are described in detail with reference to the accompanying drawings, it should be understood that the concepts are not limited to those exact examples. Accordingly, the scope of those concepts is intended to be defined by the accompanying claims and their equivalents. Furthermore, it is taken into consideration that certain features described individually or as part of an example may be combined with other individually described features or parts of other examples, even if other features and examples do not refer to those particular features. Therefore, the absence of a description of combinations should not prevent any right to such combinations. [Explanation of Symbols]

[0070] 10 User devices 20 Code Editors 80 Web-based applications 100 Graphics Design Systems (GDS) 102 Programming Interface 120 rendering engines 130 Design Interfaces 132 Code Interface 140 Program code resources (plugin API) 142 Search Parts 145 Chord Expressions 150 Network Systems 152 Synchronized parts 155 Workspace files

Claims

1. A computer execution method, A step of maintaining data storage containing searchable information for graphic design, wherein the searchable information includes character-based information containing terms and values ​​for a group of layers constituting the graphic design, each layer corresponding to an object, a group of objects, or an object of a certain type, and each layer being associated with a set of attributes including a character identifier, and The steps include receiving string input via the code editor interface, The steps include performing a matching operation to associate the string with terms and / or values ​​of the character-based information for one or more layers of the group, A step of determining the expected or corresponding line of code input based on the terms, values, or combinations of terms and values, The steps of providing the code editor with the predicted or corresponding code input so that a portion of the code input is automatically completed with the predicted or corresponding code input; A computer execution method that includes this.

2. The computer execution method according to claim 1, wherein the predicted or corresponding line of code input includes a character identifier from one layer of the group.

3. The computer execution method according to claim 1, wherein the predicted or corresponding line of code input corresponds to an attribute value of one of the layers in the group.

4. The step of receiving a partial line of code input includes receiving the line of code input via an application program interface over one or more networks, The computer execution method according to claim 1, wherein the step of providing the predicted line of code input includes transmitting the predicted or corresponding line of code input via the application program interface.

5. The computer execution method according to claim 1, wherein the predicted or corresponding line of code input is at least partially based on character identifiers of the corresponding layer.

6. The computer execution method according to claim 1, wherein the step of performing the matching operation includes determining a set of candidate line of code inputs from one or more terms and / or values ​​of the group of layers, and selecting the predicted or corresponding line of code input from the set of candidates based on one or more weight factors of the set of candidate line of code inputs.

7. The computer execution method according to claim 6, wherein the weighting factor is based on at least one node or layer of code line input from the set of candidates.

8. The computer execution method according to claim 6, wherein the weighting factor includes the frequency or count in the data storage of individual terms or values ​​corresponding to the one or more inputs.

9. The computer execution method according to claim 6, further comprising the step of receiving one or more additional character pairs as a substring, wherein the step of performing the matching operation includes narrowing down the pair of candidate code line inputs based on the additional one or more character pairs.

10. The step of performing the matching operation is: This includes identifying the portion of the graphic design that corresponds to the location of the code representation where a partial code line input has been made, The computer execution method according to claim 1, wherein the corresponding terms and / or values ​​are included in the specified portion of the graphic design.

11. The computer execution method according to claim 1, wherein the predicted or corresponding line of code input includes attribute identifiers for the corresponding layer.

12. The computer execution method according to claim 1, wherein the predicted or corresponding line of code input includes values ​​based on the attributes of the corresponding layer.

13. A computer system, One or more processors, Memory that stores instruction sets and The system includes, and the one or more processors store instruction sets and execute operations, and the operations are A step of maintaining data storage containing searchable information for graphic design, wherein the searchable information includes character-based information containing terms and values ​​for a group of layers constituting the graphic design, each layer corresponding to an object, a group of objects, or an object of a certain type, and each layer being associated with a set of attributes including a character identifier, and The steps include receiving string input via the code editor interface, The steps include performing a matching operation to associate the string with terms and / or values ​​of the character-based information for one or more layers of the group, A step of determining the expected or corresponding line of code input based on the terms, values, or combinations of terms and values, The steps of providing the code editor with the predicted or corresponding code input so that a portion of the code input is automatically completed with the predicted or corresponding code input; A computer system, including a computer system.

14. The computer system according to claim 13, wherein the predicted or corresponding line of code input includes a character identifier from one layer of the group.

15. The computer system according to claim 13, wherein the predicted or corresponding line of code input corresponds to an attribute value of one of the layers in the group.

16. The step of receiving a partial line of code input includes receiving the line of code input via an application program interface over one or more networks, The computer system according to claim 13, wherein the step of providing the predicted line of code input includes transmitting the predicted or corresponding line of code input via the application program interface.

17. The computer system according to claim 13, wherein the predicted or corresponding line of code input is at least partially based on character identifiers of the corresponding layer.

18. The computer system according to claim 13, wherein the step of performing the matching operation includes determining a set of candidate line of code inputs from one or more terms and / or values ​​of the group of layers, and selecting the predicted or corresponding line of code input from the set of candidates based on one or more weight factors of the set of candidate line of code inputs.

19. The computer system according to claim 18, wherein the weighting factor is based on at least one node or layer of code line input from the set of candidates.

20. A persistent computer-readable medium for storing a set of instructions, wherein the set of instructions, when executed by one or more processors of a computer system, causes the computer system to perform an operation, and the operation is A step of maintaining data storage containing searchable information for graphic design, wherein the searchable information includes character-based information containing terms and values ​​for a group of layers constituting the graphic design, each layer corresponding to an object, a group of objects, or an object of a certain type, and each layer being associated with a set of attributes including a character identifier, and The steps include receiving string input via the code editor interface, The steps include performing a matching operation to associate the string with terms and / or values ​​of the character-based information for one or more layers of the group, A step of determining the expected or corresponding line of code input based on the terms, values, or combinations of terms and values, The steps of providing the code editor with the predicted or corresponding code input so that a portion of the code input is automatically completed with the predicted or corresponding code input; A persistent computer-readable medium, including [the specified text].

Images