Method, device, electronic equipment and medium for online processing of files

Abstract

The present disclosure relates to a file online processing method, device, electronic equipment and medium, which can be applied to front-end development and e-commerce fields. The method comprises: receiving a design file and a preview request for the design file; obtaining metadata of the design file; performing analysis processing on the metadata to generate domain-specific language (DSL) data for describing layer elements in the design file; performing conversion processing on display information of the layer elements in the DSL data to generate target display information compatible with a front-end description language; generating layer content of a rendering layer according to the target display information; and performing rendering processing on the layer content of the rendering layer to generate a preview view of the design file on a display interface corresponding to the preview request. In an application scenario, a user only needs to upload a design file in a browser, and the browser can quickly display a preview view of the design file through analysis and conversion operations.

Description

Technical Field

[0001] This disclosure relates to the fields of front-end development and e-commerce, and in particular to a method, apparatus, electronic device, and medium for online file processing. Background Technology

[0002] Taking the front-end development process in the e-commerce field as an example, most product promotions involve placing pre-designed files that can be displayed correctly in the application, such as promotional images or posters, in resource slots. Currently, the generation of most design files is as follows: for a specific resource slot, a designer creates a design draft, which is then given to the development team to develop into a page template for online deployment. Finally, the operations team uses the template online to generate the final promotional images to be launched. This process requires many participants, is cumbersome, and has low deployment efficiency.

[0003] In addition, during the process of realizing the technical concept disclosed herein, the following problems were found in the related technologies: UI (user interface) designers currently generally use Sketch software (a drawing software) to create design drafts, and the output is a file with the .sketch extension. Usually, only Sketch plugins or additional functions of the software can be used to export HTML (Hypertext Markup Language) files. This method is heavily dependent on specific design software. Once the specific design software or some necessary plugins are removed, it is impossible to preview the design draft file in a browser. Summary of the Invention

[0004] In order to solve the above-mentioned technical problems, or at least partially solve the above-mentioned technical problems, embodiments of this disclosure provide a method, apparatus, electronic device and medium for online document processing.

[0005] In a first aspect, embodiments of this disclosure provide a method for online file processing. The method includes: receiving a design draft file and a preview request for the design draft file; obtaining metadata of the design draft file; parsing the metadata to generate Domain Specific Language (DSL) data describing layer elements in the design draft file; converting the display information of the layer elements in the DSL data to generate target display information adapted to the front-end description language; generating layer content of a rendering layer based on the target display information; rendering the layer content of the rendering layer; and generating a preview view of the design draft file on the display interface corresponding to the preview request.

[0006] According to embodiments of this disclosure, the rendering layer is configured with a corresponding auxiliary layer, which is used to edit and control the layer content of the rendering layer. The method further includes: receiving an editing instruction to edit a previewed target design file; generating layer content of the auxiliary layer according to the editing instruction; editing and controlling the layer content of the target rendering layer of the target design file according to the layer content of the auxiliary layer to obtain updated layer content of the target rendering layer; rendering the updated layer content of the target rendering layer; and generating an updated view of the design file on the display interface corresponding to the editing instruction.

[0007] According to embodiments of this disclosure, the editing instructions include at least one of the following: layer editing instructions, canvas editing instructions, or text editing instructions; the auxiliary layer includes a layer control layer, a canvas control layer, and a text editing layer; wherein, generating the layer content of the auxiliary layer according to the editing instructions includes at least one of the following: generating a layer update instruction for the layer control layer according to the layer editing instructions; generating a canvas update instruction for the canvas control layer according to the canvas editing instructions; generating a text update instruction for the text editing layer according to the text editing instructions; wherein, editing and controlling the layer content of the target rendering layer according to the layer content of the auxiliary layer to obtain the updated layer content of the target rendering layer includes: editing and controlling the layer content of the target rendering layer according to at least one of the layer update instructions, the canvas update instructions, or the text update instructions to obtain the updated layer content of the rendering layer.

[0008] According to embodiments of this disclosure, the layer control layer includes a selection layer and a mask layer. The selection layer is used to highlight the content of the selected layer in the rendering layer. The selection layer and its property panel are used to apply one or more of the following editing operations: position information editing operation, layer information editing operation, grouping information editing operation, and general style editing operation. The mask layer is used to display the mask shape and the elements clipped by the mask. The property panel of the mask layer is used to apply mask information editing operations. The canvas control layer includes a guide line layer and a scaling layer. The guide line layer is used to display auxiliary lines. The scaling layer is used to scale the canvas according to canvas scaling instructions. The text editing layer includes a text content input layer and a text style property layer. The text editing instructions include editing instructions for changing the text content and the text style.

[0009] According to embodiments of this disclosure, the layer editing instruction includes: a layer selection instruction for a specific layer element; upon receiving the layer selection instruction, the method further includes: determining a form configuration item corresponding to the display attribute of the specific layer element; and displaying the attribute panel of the specific layer element according to the form configuration item. Rendering the updated layer content of the target rendering layer and generating an updated view of the design file in the display interface corresponding to the editing instruction includes: rendering the element selection effect in the preview view of the design file to obtain the updated view of the design file. Both the attribute panel and the updated view are displayed in the display interface corresponding to the editing instruction.

[0010] According to embodiments of this disclosure, the layer editing instructions include at least one of layer operation instructions or attribute editing instructions; wherein receiving editing instructions to edit a previewed design file includes receiving at least one of attribute editing instructions for the attribute panel or operation instructions for a specific layer element in the preview view; the operation instructions include one or more of the following: position information editing operation instructions, hierarchy information editing operation instructions, combination information editing operation instructions, general style editing operation instructions, or mask information editing operation instructions.

[0011] According to embodiments of this disclosure, when the layer editing instruction includes updating position information of a specific layer element, the method further includes: the canvas control layer controlling the canvas display guide lines of the view carrying the design draft file, the guide lines being used to mark the position of the specific layer element during movement; determining whether the specific layer element has a preset target element for alignment; if the specific layer element has a preset target element, detecting whether the position of the specific layer element falls within a preset distance range of the target element; and if the position of the specific layer element falls within the preset distance range of the target element, automatically moving the specific layer element to a position aligned with the target element.

[0012] According to embodiments of this disclosure, the display information of layer elements in the aforementioned DSL data is converted to generate target display information adapted to the front-end description language. This includes: converting the style information of layer elements in the aforementioned DSL data to generate target style information adapted to the front-end description language; converting the element type of layer elements in the aforementioned DSL data to generate a general element type adapted to the front-end description language; constructing a coordinate system based on the structural information of layer elements in the aforementioned DSL data, and converting the structural information of each layer element into target layout information in the aforementioned coordinate system.

[0013] According to embodiments of this disclosure, parsing the aforementioned metadata to generate Domain-Specific Description Language (DSL) data for describing layer elements in the aforementioned design draft file includes: parsing the canvas data in the aforementioned metadata to obtain canvas parsing data; and using the canvas parsing data as input to a predefined DSL framework structure to generate DSL data.

[0014] According to embodiments of this disclosure, the canvas data of the aforementioned metadata is parsed to obtain canvas parsing data, including: correcting the coordinates of borders in the centered and internal positions to obtain directly usable precise coordinates; correcting the transparency settings for transparency pass-through to obtain directly usable precise transparency; converting relative coordinates to absolute coordinates; adjusting the origin of the coordinate system from a specified position to the origin; correcting the content that exceeds the clipping area and needs to be clipped; determining whether there is special element information, sliced ​​areas, invisible areas, and layer overlay states; if special element information exists, parsing and extracting the original information of the canvas and special elements corresponding to the aforementioned metadata, and proportionally mixing the original information corresponding to the special elements into the special element instances in the canvas; if sliced ​​areas exist, hiding the layers within the sliced ​​areas; if invisible areas exist, removing the information of the invisible area layers; and if layer overlay states exist, adjusting the layer order based on the visually reasonable effect during overlay rendering.

[0015] According to embodiments of this disclosure, using the aforementioned canvas parsing data as input to a predefined DSL framework structure to generate DSL data includes: using the aforementioned canvas parsing data as input information to the aforementioned DSL structure to generate layer data for each layer element; the aforementioned DSL framework structure includes: element type, layer ID, layer name, layer value, structure information, style information, and sublayer information for each layer element; the aforementioned layer value includes one or more of the following: graphic path information, text information, or image information; setting the multi-level sublayer data of each layer element to the same level to obtain DSL data containing only one parent-child layer relationship.

[0016] According to embodiments of this disclosure, obtaining the metadata of the design draft file includes: uploading the design draft file to a server in the form of a compressed package; and obtaining the metadata extracted from the decompressed design draft file from the server, wherein the metadata includes layer information in JSON format.

[0017] Secondly, embodiments of this disclosure provide an apparatus for online file processing. The apparatus includes: a request receiving module, a metadata acquisition module, a parsing module, an information conversion module, a rendering layer content generation module, and a rendering processing module. The request receiving module receives a design draft file and a preview request for the design draft file. The metadata acquisition module acquires the metadata of the design draft file. The parsing module parses the metadata to generate Domain-Specific Description Language (DSL) data describing the layer elements in the design draft file. The information conversion module converts the display information of the layer elements in the DSL data to generate target display information adapted to the front-end description language. The rendering layer content generation module generates layer content for the rendering layer based on the target display information. The rendering processing module renders the layer content of the rendering layer and generates a preview view of the design draft file on the display interface corresponding to the preview request.

[0018] According to embodiments of this disclosure, the rendering layer is configured with a corresponding auxiliary layer, which is used to edit and control the layer content of the rendering layer. The request receiving module is further configured to receive editing instructions for editing elements in a previewed target design file. The apparatus further includes an operator, which is configured to generate layer content of the auxiliary layer according to the editing instructions; and to edit and control the layer content of the target rendering layer in the target design file according to the layer content of the auxiliary layer, thereby obtaining updated layer content of the target rendering layer. The rendering processing module is further configured to perform rendering processing on the updated layer content of the target rendering layer, and generate an updated view of the design file on the display interface corresponding to the editing instructions.

[0019] Thirdly, embodiments of this disclosure provide an electronic device. The electronic device includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, communication interface, and memory communicate with each other via the communication bus; the memory stores computer programs; and the processor, when executing the program stored in the memory, implements the online file processing method described above.

[0020] Fourthly, embodiments of this disclosure provide a computer-readable storage medium. The computer-readable storage medium stores a computer program, which, when executed by a processor, implements the online file processing method described above.

[0021] Some of the technical solutions provided in the embodiments of this disclosure have at least some or all of the following advantages:

[0022] By acquiring the metadata of the design draft file, parsing and processing this metadata, DSL data describing the layer elements in the design draft file is generated. Simultaneously, by transforming the display information of the layer elements in the DSL data, target display information adapted to the front-end description language is generated. This enables real-time compilation and parsing of the design draft file, converting data from the design software's own system into data recognizable by front-end description languages ​​(such as CSS or HTML). It does not rely on any capabilities of the design software itself and can automatically generate target display information suitable for browser rendering and editing, thus supporting online rendering. In application scenarios, users only need to upload the design draft file to a browser, and the browser can quickly display a preview view of the design draft through parsing and transformation operations. Furthermore, the parsed DSL data, independent of the design software, facilitates subsequent online editing of the design draft file. Attached Figure Description

[0023] The accompanying drawings, which are incorporated in and form a part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure.

[0024] To more clearly illustrate the technical solutions in the embodiments of this disclosure or the prior art, the accompanying drawings used in the description of the embodiments or related technologies will be briefly introduced below. Obviously, those skilled in the art can obtain other drawings based on these drawings without creative effort.

[0025] Figure 1 The system architecture of a method for online document processing applicable to embodiments of this disclosure is illustrated schematically;

[0026] Figure 2 A flowchart illustrating an online document processing method according to an embodiment of the present disclosure is shown schematically.

[0027] Figure 3 A schematic diagram illustrating an implementation scenario of step S210 according to an embodiment of the present disclosure is shown.

[0028] Figure 4 A detailed implementation flowchart of step S230 according to an embodiment of the present disclosure is illustrated schematically;

[0029] Figure 5 A detailed implementation flowchart of step S240 according to an embodiment of the present disclosure is illustrated schematically;

[0030] Figure 6 A flowchart illustrating a method for online document processing according to another embodiment of this disclosure is shown schematically;

[0031] Figure 7A A schematic diagram of the architecture of an auxiliary layer according to an embodiment of the present disclosure is shown.

[0032] Figure 7B A schematic diagram illustrating the display effect of an auxiliary layer control display interface according to an embodiment of the present disclosure is shown.

[0033] Figure 8 A flowchart illustrating online editing in a method for online document processing according to an embodiment of the present disclosure is shown schematically.

[0034] Figure 9 A flowchart illustrating online editing in a method for online document processing according to another embodiment of this disclosure is shown schematically;

[0035] Figure 10 A structural block diagram of an apparatus for online document processing according to an embodiment of the present disclosure is shown schematically;

[0036] Figure 11 The diagram schematically illustrates a scenario interaction timing diagram of a document online processing apparatus performing data processing according to embodiments of the present disclosure; and

[0037] Figure 12 A schematic block diagram of an electronic device provided in an embodiment of the present disclosure is shown. Detailed Implementation

[0038] Existing design submission solutions involve multiple roles, encompassing design time, development time, and testing / deployment time. The design process is lengthy, cumbersome, and inefficient; a single design image typically takes several days from completion to final adjustments and refinement. Furthermore, UI designers currently use Sketch software to create design drafts, producing files with the .sketch extension. This usually requires Sketch plugins or additional software features to export HTML (Hypertext Markup Language) files. This method heavily relies on specific design software; the design draft files and the exported HTML cannot be directly recognized and parsed by browsers or programming languages, rendering editing impossible and limiting their use to previewing and development assistance. Without specific design software or necessary plugins, design draft files cannot be previewed in a browser. These design software programs are paid, resulting in high purchase and deployment costs.

[0039] In view of this, embodiments of this disclosure provide a method, apparatus, electronic device, and medium for online file processing. This allows for browser parsing, processing, and previewing of design draft files without the need for plugins. In application scenarios, users only need to upload the design draft file to a browser, which can then quickly display a preview view of the file through parsing and conversion. Furthermore, the DSL data and target display information obtained through parsing are not limited by the plugin parsing and description methods of design software, facilitating subsequent online editing of the design draft file. The solutions provided by embodiments of this disclosure can automate the processing of design draft files designed using various types of design software (such as Sketch and Photoshop), enabling online previewing of design files. In some embodiments that include auxiliary layers, online previewing and online editing can be achieved simultaneously.

[0040] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this disclosure. Based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0041] Figure 1 The system architecture of a method for online document processing applicable to embodiments of this disclosure is illustrated schematically.

[0042] Reference Figure 1 As shown, the system architecture 100 of the online file processing method applicable to embodiments of this disclosure is a B (Browser) / S (Server) architecture, including: terminal devices 101, 102, and 103, a network 104, and a server 105. The network 104 is a medium for providing a communication link between the terminal devices 101, 102, and 103 and the server 105. The network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0043] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various web applications, such as different types of browsers, can be installed on terminal devices 101, 102, and 103. In addition, other applications can be installed, such as design applications, social networking applications, email clients, online shopping applications, etc.

[0044] Terminal devices 101, 102, and 103 can be various electronic devices with displays that support image playback. Examples of such electronic devices include, but are not limited to, smartphones, tablets, laptops, desktop computers, and so on.

[0045] Server 105 can be a server that provides various services, such as a backend management server that provides data parsing and processing support for design files uploaded by users using terminal devices 101, 102, and 103 (this is just an example). The backend management server can analyze and process data such as the received design file processing requests, and feed back the processing results (such as the metadata of the design files) to the terminal devices.

[0046] It should be noted that the online file processing method provided in this disclosure can generally be executed by a terminal device. Accordingly, the online file processing apparatus provided in this disclosure can generally be installed in a terminal device.

[0047] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0048] The first exemplary embodiment of this disclosure provides a method for online file processing.

[0049] Figure 2 A flowchart illustrating a method for online document processing according to an embodiment of the present disclosure is shown schematically.

[0050] Reference Figure 2 As shown, the online file processing method provided in this embodiment includes the following steps: S210, S220, S230, S240, S250, and S260. Steps S210 to S260 can be executed by a web application on a terminal device, such as a browser or other web browsing application.

[0051] In step S210, the design draft file and a preview request for the design draft file are received.

[0052] Design files can be created using various design software, such as Sketch (a design software that generates source files in .sketch format) and Photoshop (a design software that generates source files in .psd format). Design files can include various graphics, images, and text. In the embodiments of this disclosure, design files can include static images.

[0053] Figure 3A schematic diagram illustrating an implementation scenario of step S210 according to an embodiment of the present disclosure is shown.

[0054] In one implementation scenario, refer to Figure 3 The illustration shows a web page 300 on a terminal device. The web page 300 has function buttons and built-in windows, or pop-up windows triggered by clicking the function buttons. For example, the function button could be the preview file 301 function button, or the template creation button 302 function button. For instance, the web page 300 has a built-in window 303. Users (e.g., UI designers) upload design files through the built-in window 303, and then click the preview file 301 function button to refer to... Figure 3 The single arrow indicates that the terminal device is considered to have received the design file and a preview request for it. Alternatively, for example, if a user clicks the "Create Template 302" button, a window 303 will pop up above the web page 300 prompting the user to upload the design file. The user (e.g., a UI designer) uploads the design file through the built-in window 303. Once the design file is uploaded, the terminal device is considered to have received the design file and a preview request for it. (Refer to...) Figure 3 As shown by the double arrows in the image.

[0055] In step S220, the metadata of the above-mentioned design draft file is obtained.

[0056] According to embodiments of this disclosure, obtaining the metadata of the above-mentioned design draft file includes: uploading the above-mentioned design draft file to the server in the form of a compressed package; and obtaining the metadata extracted from the above-mentioned design draft file after decompression from the server.

[0057] In one embodiment, taking Sketch software as an example, the server decompresses the design file using a zip-like process, stores and reads the metadata from the JSON file, and obtains the metadata, including layer information in JSON format. A similar server-side extraction method can be used to extract metadata from other design software to obtain layer information in JSON format.

[0058] In step S230, the above metadata is parsed to generate Domain-Specific Description Language (DSL) data for describing the layer elements in the above design file.

[0059] For example, step S230 can be implemented by calling the design draft parser through a web page. The design draft parser is a functional module implemented in JS (short for JavaScript, a high-level, multi-paradigm, interpreted programming language).

[0060] By parsing and processing the metadata to obtain DSL data, this step is at least used to eliminate the complexity of the JSON data that comes with the design draft file, and to summarize and refine the design draft content that needs to be presented in the business scenario (i.e., a certain domain).

[0061] In step S240, the display information of the layer elements in the above DSL data is transformed to generate target display information that is compatible with the front-end description language.

[0062] Front-end description languages ​​include CSS (Cascading Style Sheets, a style sheet language used to describe HTML documents) or HTML, etc.

[0063] By further transforming and processing the display information of layer elements in the DSL data, target display information adapted to the front-end description language is generated, preparing for the rendering of the current web page.

[0064] In step S250, the layer content of the rendering layer is generated based on the target display information mentioned above.

[0065] In the embodiments of this disclosure, the rendering layer is a layer used for rendering and display. The rendering layer includes one or more element layers. By precisely positioning and arranging the element layers corresponding to various element types such as containers, text, images, paths, masks, and groups on the canvas according to a preset layout, a page can be formed. The target display information defines the display content and attributes of each layer element contained in the design draft file in a language that the current web page can understand. After generating the layer content, a preview view can be obtained by rendering accordingly.

[0066] In some embodiments, in order to overlay shadows or other effects on the element layer, the rendering layer may also include a box shadow layer, which is used to display shadows and overlay them with the element layer to form the final page image.

[0067] In step S260, the layer content of the above rendering layer is rendered, and a preview view of the above design file is generated on the display interface corresponding to the above preview request.

[0068] The display interface corresponding to the above preview request can be a web page on the terminal device, such as the display interface of a browser.

[0069] Based on steps S210-S260 above, metadata of the design draft file is obtained; the metadata is parsed and processed to generate DSL data describing the layer elements in the design draft file; simultaneously, the display information of the layer elements in the DSL data is converted to generate target display information adapted to the front-end description language; real-time compilation and parsing of the design draft file is achieved, converting data from the design software's own system into data recognizable by the front-end description language (e.g., CSS or HTML), without relying on any capabilities of the design software itself, and automatically generating target display information that can be used for browser rendering and editing, thus supporting online rendering. In application scenarios, users only need to upload the design draft file to the browser, and the browser can quickly display a preview view of the design draft through parsing and conversion operations; furthermore, the parsed DSL data is independent of the design software, which also facilitates subsequent online editing of the design draft file.

[0070] In some embodiments, at least one of the following data from a previewed design file can be stored: DSL data, target display information under a specific front-end description language, and layer content of a rendered layer under a specific front-end description language. This allows for subsequent editing operations on the design file when edited online on the same or different terminal devices using the same or different types of browsers. This storage operation can be implemented by a functional module with data storage management, data retrieval, and access permission functions: a data manager.

[0071] Figure 4 A detailed implementation flowchart of step S230 according to an embodiment of the present disclosure is shown schematically.

[0072] Reference Figure 4 As shown, according to an embodiment of this disclosure, in step S230 above, the metadata is parsed and processed to generate Domain Specific Description Language (DSL) data for describing the layer elements in the design draft file, including the following steps: S410 and S420.

[0073] In step S410, the canvas data in the above metadata is parsed to obtain canvas parsing data.

[0074] According to an embodiment of this disclosure, step S410 above, which involves parsing the canvas data of the metadata to obtain canvas parsing data, includes the following steps:

[0075] Border processing steps: Correct the coordinates of the borders in the center and inner positions to obtain accurate coordinates that can be used directly;

[0076] Transparency processing steps: Correct the transparency settings for transparency pass-through to obtain accurate transparency that can be used directly;

[0077] Coordinate transformation process: Convert relative coordinates to absolute coordinates in order to remove coordinate dependencies between layers and facilitate subsequent independent operations;

[0078] Coordinate system origin processing steps: Adjust the origin of the coordinate system from the specified position to the coordinate origin (0, 0) to facilitate the direct use of subsequent coordinates;

[0079] Masking clipping process: Clip and correct content that exceeds the clipping area and needs to be clipped to ensure that subsequent content does not overflow;

[0080] Determine if there are special component information, sliced ​​areas, invisible areas, and layer overlay status;

[0081] In the case of special component information, perform the special component information parsing step: parse and extract the original information of the canvas and special components corresponding to the above metadata, and mix the original information corresponding to the above special components into the special component instances in the canvas in proportion;

[0082] If a sliced ​​area exists, perform the slice processing steps: hide the layers within the sliced ​​area to prevent duplicate information from existing in the same area.

[0083] In the case of invisible areas, a slicing process is performed: information from the invisible area layer is removed, and information that is not useful for display is removed to reduce the size of the descriptive information;

[0084] When layers are overlaid, perform the following layer occlusion handling steps: based on the visually reasonable effect of overlay rendering, adjust the layer order to ensure that subsequent overlay rendering is normal.

[0085] Special elements, such as Symbols in Sketch or Smart Layers in Photoshop, are defined as vectors that can be arbitrarily scaled up or down. Therefore, they need to be converted and processed according to their actual usage.

[0086] In one embodiment, reference is made to Figure 4 As shown, taking the metadata parsing of a Sketch design file as an example, and considering the presence of special component information (specifically Symbol), sliced ​​areas, invisible areas, and layer overlay states, this example demonstrates the following:

[0087] In step S420, the above-mentioned drawing board parsing data is used as input to the predefined DSL framework structure to generate DSL data.

[0088] According to an embodiment of this disclosure, in step S420 above, the drawing board parsing data is used as input to a predefined DSL framework structure to generate DSL data, including the following steps:

[0089] Information generation steps: Use the above canvas parsing data as input information for the above DSL structure to generate layer data for each layer element;

[0090] Data flattening step: Set the multi-level sublayer data of each of the above layer elements to the same level, resulting in DSL data containing only one level of parent-child layer relationships. In this step, the data structure with many levels is flattened to the same level, which facilitates subsequent querying and usage efficiency.

[0091] The aforementioned DSL framework structure includes: element type of layer elements, layer ID, layer name, layer value, structural information, style information, and sublayer information. The layer values ​​include one or more of the following: graphic path information, text information, or image information.

[0092] When the layer element's element type is path, the layer value includes the graphic path information. When the layer element's element type is image, the layer value includes image information. When the layer element's element type is text, the layer value includes text information.

[0093] Reference Figure 4 As shown, the steps for generating the above information illustrate the corresponding values, structural information, and style information for each layer. The step of generating structural information primarily involves rendering (based on the DSL framework structure; the meaning of other rendering methods in this section is the same) the structural information of the layer, including coordinate information, width, height, and border information. The step of generating style information primarily involves rendering the style information of the layer, including projection information, rounded corner information, and background information. The step of generating graphic path information primarily involves rendering the information of vector graphics, converting the graphics into describable path information. The step of generating text information primarily involves rendering text information, including single-line text and multi-line text. The step of generating image information primarily involves rendering the information of the image.

[0094] According to embodiments of this disclosure, the aforementioned metadata includes layer information in JSON format. The aforementioned display information includes: style information, element type, and structural information; the structural information includes: coordinate information, width and height dimensions, and border information.

[0095] Figure 5 A detailed implementation flowchart of step S240 according to an embodiment of the present disclosure is illustrated schematically.

[0096] Reference Figure 5As shown, in step S240 above, the display information of the layer elements in the DSL data is converted to generate target display information that is compatible with the front-end description language, including the following steps: S510, S520 and S530.

[0097] In step S510, the style information of the layer elements in the above DSL data is converted to generate target style information that is compatible with the front-end description language.

[0098] For example, in one embodiment, the style information (Style Object) in the DSL data is converted into style information (CSS) that the browser can understand. With this information, the page display of each element (which may be a layer element, sublayer, etc.) in the design file can be depicted on the browser.

[0099] In step S520, the element types of the layer elements in the above DSL data are converted to generate a general element type that is compatible with the front-end description language.

[0100] For example, in this embodiment, the common element types include: container, text, image, path, mask, and group. These six elements can describe which categories of sub-elements make up the design draft.

[0101] The above steps S510 and S520 can be executed by the data converter module.

[0102] In step S530, a coordinate system is constructed based on the structural information of the layer elements in the DSL data, and the structural information of each layer element is converted into target layout information in the coordinate system.

[0103] The DSL data describing the design draft file records the structural information of each element within the design draft, including coordinate information, width and height information, rotation information, border information, and transparency information. This structural information is used to construct a coordinate system, such as a vertex coordinate system or a center coordinate system, and to calculate the layout information of each element.

[0104] The above steps S530 can be performed by the layout calculator module.

[0105] For example, taking a text layer as an example, in addition to some common attributes, it also has unique attributes such as text content and text style. For instance, the structural information of a layer element is as follows:

[0106]

[0107] The design draft content area is the canvas, and various elements are distributed within the canvas. A vertex coordinate system is used to describe the positional information of each element within the design draft. A center-point coordinate system is constructed around the center point of the canvas to calculate the positional information of each element after scaling.

[0108] To enable simultaneous online preview and editing of design files, a layered processor was constructed to perform the image rendering process. This layered processor includes two types of layers: rendering layers and auxiliary layers. Rendering layers are used for rendering and display, while auxiliary layers are used for editing and controlling the content of the rendering layers.

[0109] By setting up two types of layers—rendering layers and auxiliary layers—and using the auxiliary layers to edit and control the content of the rendering layers, this approach not only enables file previewing without the design software, but also allows the previewed file to be used as a template. The previewed file can then be edited online in a browser, resulting in an updated design file based on the template. This significantly improves the efficiency of uploading design files online. The solution is compatible with various browsers and supports online previewing and editing of the same design file on different browsers. The online previewing and editing process does not rely on plugins or specific functions of the design software, which helps expand application scenarios and save costs.

[0110] According to embodiments of this disclosure, the rendering layer is configured with a corresponding auxiliary layer, which is used to edit and control the layer content of the rendering layer. During the execution of steps S210 to S260, since there is no editing of the layer content in the preview request, the auxiliary layer does not need to update the layer content of the rendering layer.

[0111] Figure 6 A flowchart illustrating a method for online document processing according to another embodiment of this disclosure is shown schematically.

[0112] Another embodiment of this disclosure provides a method for online document processing, which, in addition to the steps S210 to S260 described above, also includes the following steps: S610, S620, S630, and S640. For the sake of simplicity, only these steps are shown here. Figure 6 Steps S610 to S640 are illustrated.

[0113] In step S610, an editing instruction is received to edit the previewed target design file.

[0114] There are one or more previewed design files. The design file that needs to be edited is described as the target design file. As described above, the intermediate processing data of the previewed design files (DSL data corresponding to execution steps S210 to S260, target display information under a specific front-end description language, layer content of rendering layers under a specific front-end description language, etc., one or more of the data) can be stored through the data manager.

[0115] For example, in one implementation scenario, a UI designer first uploads a design file T to a browser X on a terminal device A. Then, steps S210 to S260 are executed on terminal device A, displaying a preview view of the design file on browser X. The content of the preview view matches the content of the design file. Terminal device A will automatically or in response to a user request save the preview view as a design template M. T .

[0116] In the implementation scenario of step S610, the user can access the template data corresponding to a previously stored previewed design file on the web page of the current terminal device. The user in step S610 can be, for example, an operations staff member, a designer, or a front-end developer, who is a member of the same data access permission group for the same design file.

[0117] If the UI designer or operations staff needs to edit and modify the design draft file online, such as modifying text content, replacing an image, or modifying the attributes of a graphic, the UI designer or system operations staff (who have been assigned corresponding data access permissions in the data manager) can edit the design draft template M on terminal device A or another terminal device B using the same browser X or another browser Y. T Perform online editing.

[0118] In step S620, the layer content of the auxiliary layer is generated according to the above editing instructions.

[0119] According to embodiments of this disclosure, the above-mentioned editing instructions include at least one of the following: layer editing instructions, canvas editing instructions, or text editing instructions.

[0120] Figure 7A A schematic diagram of the architecture of an auxiliary layer according to an embodiment of the present disclosure is shown.

[0121] According to embodiments of this disclosure, referring to Figure 7AAs shown, the auxiliary layer 700 includes a layer control layer 710, a canvas control layer 720, and a text editing layer 730. The layer control layer is used for layer editing control under the layer editing commands, the canvas control layer is used for canvas editing control under the canvas editing commands, and the text editing layer is used for text editing control under the text editing commands.

[0122] Based on the above editing instructions, the layer content of the above auxiliary layer is generated, including at least one of the following: based on the above layer editing instructions, a layer update instruction for the above layer control layer is generated; based on the above canvas editing instructions, a canvas update instruction for the above canvas control layer is generated; based on the above text editing instructions, a text update instruction for the above text editing layer is generated.

[0123] In step S630, based on the layer content of the auxiliary layer, the layer content of the target rendering layer of the target design file is edited and controlled to obtain the updated layer content of the target rendering layer.

[0124] Specifically, editing and controlling the layer content of the target rendering layer based on the layer content of the auxiliary layer to obtain the updated layer content of the target rendering layer includes: editing and controlling the layer content of the target rendering layer based on at least one of the layer update instruction, the canvas update instruction, or the text update instruction to obtain the updated layer content of the rendering layer.

[0125] Figure 7B A schematic diagram illustrating the display effect of an auxiliary layer control display interface according to an embodiment of the present disclosure is shown.

[0126] exist Figure 7B The background area of ​​the design draft is shown in the dashed frame. Canvas 701 is the area that holds layer elements. Ellipses, triangles, and squares are used to indicate various layer elements.

[0127] According to embodiments of this disclosure, referring to Figure 7A As shown, the layer control layer 710 includes a selection layer 711 and a mask layer 712; the selection layer 711 is used to highlight the content of the selected layer in the rendering layer, as shown in the figure. Figure 7B As shown, one of the layer elements is used as an example of the selected layer. For example, the text layer corresponding to the box is used as an example of the selected layer. The effect of the selected layer is shown by the bold box. At this time, the text layer corresponds to the specific layer content of the selected layer 711. The property panel 7111 corresponding to the selected layer 711 is the property panel of the text layer, which is also presented on the display interface 70.

[0128] Each layer element can be selected by the user and edited by the selected layer. The selected layer 711 and its property panel 7111 are used to apply one or more of the following editing operations: position information editing operation, layer information editing operation, group information editing operation, and general style editing operation.

[0129] exist Figure 7B In the process, when a layer element in another rendering layer is selected, the content of the layer corresponding to the selected layer 711 will change.

[0130] The aforementioned mask layer 712 is used to display the mask shape and the elements clipped by the mask. The property panel of the aforementioned mask layer 712 is used for editing operations on the mask information. Figure 7B Not indicated in the text.

[0131] In one embodiment, the location information editing operation includes moving, modifying width and height, rotating, etc.

[0132] In one embodiment, the hierarchy information editing operation includes adjusting the stacking order of elements within the canvas.

[0133] In one embodiment, the combined information editing operation includes combining multiple elements into a new element.

[0134] In one embodiment, general style editing operations include editing common styles such as fill, border, shadow, and blur for various layer elements (including graphics, text, images, paths, masks, groups, etc.). Image elements and text elements each have their own unique styles. For example, text elements have content styles such as font size, font type, letter spacing, line spacing, text alignment, and text embellishments (including bold, italics, underline, strikethrough, etc.).

[0135] In one embodiment, mask information editing operations include modifying the mask shape, changing the area where the element is clipped by the mask by moving the element, etc.

[0136] Reference Figure 7A As shown, the canvas control layer 720 includes a reference line layer 721 and a scaling layer 722. The reference line layer 721 is used to display auxiliary lines, and the scaling layer 722 is used to scale the canvas 701 according to canvas scaling instructions. Figure 7B In the diagram, crosshairs and four lines representing the layer border are used to indicate auxiliary lines.

[0137] Reference Figure 7A As shown, the text editing layer 730 includes a text content input layer 731 and a text style attribute layer 732; the text editing instructions include editing instructions for changing the text content and the text style.

[0138] The Properties panel (7111) can simultaneously display layer attribute information and personalized attribute information (such as text style attributes) for each layer element. (See reference...) Figure 7B The upper dashed box indicates personalized attribute information, and the lower dashed box indicates general layer attribute information.

[0139] When a text layer is selected, only its general layer properties can be modified through the corresponding properties panel. For example, refer to... Figure 7B The dashed box at the bottom of the properties panel 7111 is shown. When you need to edit the text layer, you can double-click the text content input layer 731 in the text editing layer 730 to modify the text content, or you can edit the content style in the text style property layer 732 displayed in the properties panel, for example, referring to... Figure 7B The dashed box at the top of the Attributes panel 7111 is shown.

[0140] In step S640, the updated layer content of the target rendering layer is rendered, and an updated view of the design file is generated in the display interface corresponding to the editing command.

[0141] The steps {S610, S620, S630, S640} and {S210, S220, S230, S240, S250, S260} described above can be executed by the same browser on the same terminal device, or by different browsers on the same terminal device or different terminal devices.

[0142] The following section introduces some examples of editing design draft files.

[0143] According to embodiments of this disclosure, the layer editing instructions include: layer selection instructions for specific layer elements; specific layer elements include various types of layer elements such as graphics, text, images, paths, masks, and groups.

[0144] Figure 8 A flowchart illustrating online editing in a method for online document processing according to an embodiment of the present disclosure is shown schematically.

[0145] This embodiment describes the layer selection command as the editing command in step S610, omitting the introduction of steps S210 to S260, and focusing on the detailed process of editing the design draft.

[0146] Reference Figure 8 As shown, the online editing process includes the following steps: S610a, S810, S820, S620a, S630a and S640a.

[0147] In step S610a, a layer selection command is received to select specific layer elements in the previewed target design file. Step S610a is one implementation of step S610, and step S610 may also have other implementations.

[0148] In step S810, the form configuration items corresponding to the display attributes of the specific layer element are determined.

[0149] In step S820, the attribute panel of the specific layer element is displayed according to the above form configuration items.

[0150] In step S620a, a layer update instruction for the layer control layer is generated according to the layer selection instruction. This layer update instruction includes an instruction to select the specific layer element. Step S620a is one implementation of step S620, and step S620 may also have other implementations.

[0151] In step S630a, according to the layer update instruction of the layer control layer, a selection operation is performed on a specific layer element of the target rendering layer of the target design file to obtain the updated layer content of the target rendering layer. Step S630a is one implementation of step S630, and step S630 may also have other implementations.

[0152] In step S640, the updated layer content of the target rendering layer is rendered, and an updated view of the design file is generated in the display interface corresponding to the editing command.

[0153] Step S640 above includes the following step S640a: rendering the element selection effect in the preview view of the design file to obtain the updated view of the design file.

[0154] The aforementioned property panel and update view are both displayed in the display interface corresponding to the aforementioned editing commands, for example, refer to Figure 7B As shown, the updated view of the selected text layer element in the design file and the property panel of the text layer element are both displayed on the display interface 70.

[0155] According to embodiments of this disclosure, after selecting a specific layer element, operations can be performed on that specific layer element or its property panel can be edited. Accordingly, the aforementioned layer editing instructions include at least one of layer operation instructions or property editing instructions.

[0156] The method of receiving editing instructions for editing previewed design files includes: receiving at least one of the following layer editing instructions: attribute editing instructions for the aforementioned attribute panel or operation instructions for specific layer elements in the aforementioned preview view; the aforementioned operation instructions include one or more of the following: position information editing operation instructions, hierarchy information editing operation instructions, combination information editing operation instructions, general style editing operation instructions, or mask information editing operation instructions.

[0157] Figure 9 A flowchart illustrating online editing in a method for online document processing according to another embodiment of this disclosure is shown schematically.

[0158] According to another embodiment of this disclosure, the online editing process includes the following steps: S610b, S620b, S630b, S640b, S910, S920, S930 and S940.

[0159] In step S610b, a layer editing instruction is received to update the position information of a specific layer element in the previewed target design file.

[0160] In step S620b, a layer update instruction for the layer control layer is generated based on the layer editing instruction for updating the position information. The layer update instruction includes an instruction to update the position information of the specific layer element.

[0161] In step S630b, according to the layer update instruction of the layer control layer, a position shift operation is performed on a specific layer element of the target rendering layer of the target design file to obtain the updated layer content of the target rendering layer.

[0162] In step S640, the updated layer content of the target rendering layer is rendered, and an updated view of the design file is generated in the display interface corresponding to the editing command.

[0163] Step S640 includes the following step S640b: rendering the effect of the element being moved in the preview view of the above design file to obtain the updated view of the above design file.

[0164] In some embodiments, when the same design file is previewed and edited in different browsers, rendering can be performed directly based on the updated layer content. In other embodiments, when the same design file is previewed and edited in the same browser, dynamic rendering is performed directly based on the preview view.

[0165] In step S910, the canvas control layer controls the canvas display guide lines that carry the design draft file view. The guide lines are used to mark the position of specific layer elements during movement.

[0166] For example, refer to Figure 7B As shown, a specific layer element is an image layer element represented by an ellipse. During the movement of this image layer element, guide lines will be displayed on canvas 701. Figure 7B The example illustrates six auxiliary lines. In this example, the element itself is abstracted as a rectangular container, and the four sides, horizontal center line, and vertical center line of the container are used as auxiliary lines. In practice, the number and position of auxiliary lines can be increased or decreased as needed.

[0167] In step S920, it is determined whether the aforementioned specific layer element has a preset target element for alignment.

[0168] In step S930, if a target element is preset in the aforementioned specific layer element, it is detected whether the position of the aforementioned specific layer element falls within a preset distance range of the target element. For example, the preset distance range is within 4 pixels.

[0169] In step S940, if the position of the specific layer element is detected to fall within the preset distance range of the target element, the specific layer element is automatically moved to a position aligned with the target element.

[0170] Based on steps S910 to S940, when moving layer elements, auxiliary lines can be displayed based on the control of the canvas control layer, making it easier for users to refer to the auxiliary lines when manually moving layer elements to align the moving elements with the target elements; at the same time, by setting the logic of automatic judgment, when the user has preset the target element, there is no need to manually operate the alignment, and the moving elements that fall within the alignment range can be automatically aligned on the web page, improving editing efficiency and convenience.

[0171] A second exemplary embodiment of this disclosure provides an apparatus for online document processing.

[0172] Figure 10 A structural block diagram of an apparatus for online document processing according to an embodiment of the present disclosure is shown schematically.

[0173] Reference Figure 10 As shown, the online file processing apparatus 1000 provided in this embodiment includes: a request receiving module 1001, a metadata acquisition module 1002, a parsing module 1003, an information conversion module 1004, a rendering layer content generation module 1005, and a rendering processing module 1006.

[0174] Reference Figure 10 As shown by the dotted-dash arrow, the request receiving module 1001 is used to receive design draft files and preview requests for the design draft files.

[0175] The aforementioned metadata acquisition module 1002 is used to acquire the metadata of the aforementioned design draft file.

[0176] The parsing module 1003 is used to parse and process the metadata to generate Domain-Specific Description Language (DSL) data for describing the layer elements in the design file.

[0177] The aforementioned information conversion module 1004 is used to convert the display information of layer elements in the aforementioned DSL data to generate target display information that is compatible with the front-end description language.

[0178] The rendering layer content generation module 1005 is used to generate the layer content of the rendering layer based on the target display information.

[0179] The rendering processing module 1006 is used to render the content of the rendering layer and generate a preview view of the design file on the display interface corresponding to the preview request.

[0180] According to embodiments of this disclosure, the rendering layer is configured with a corresponding auxiliary layer, which is used to edit and control the content of the rendering layer.

[0181] Reference Figure 10 As shown by the double-dotted arrow, the request receiving module 1001 is also used to receive editing instructions for editing elements in the previewed target design file.

[0182] The aforementioned device 1000 further includes an operator 1007, which is used to generate the layer content of the auxiliary layer according to the aforementioned editing instructions; and to edit and control the layer content of the target rendering layer in the target design file according to the layer content of the auxiliary layer, thereby obtaining the updated layer content of the target rendering layer. For example, the operator 1007 includes a layer operator, a canvas operator, and a text operator, which can correspond to the operations performed by the layer control layer 710, the canvas control layer 720, and the text editing layer 730, respectively.

[0183] According to embodiments of this disclosure, the apparatus 1000 further includes a data manager 1008, configured to store at least one of the following data for a previewed design file: DSL data, target display information under a specific front-end description language, and layer content of a rendering layer under a specific front-end description language, and to send data about the previewed design file to a layer processor. The data manager 1008 can cooperate with the operator 1007 to perform editing control operations on the layer content of the target rendering layer in the target design file; for example, the data manager 1008 is also used to cache the layer content of auxiliary layers generated by the operator 1007 according to the editing instructions, and to transmit the data cached by the operator 1007 to the layer processor for execution by active transmission or by being read by the layer processor.

[0184] Any number of the functional modules included in the aforementioned device 1000 can be combined into one module, or any one of the modules can be split into multiple modules. For example, refer to... Figure 10 As shown, the information conversion module 1004 can be divided into two functional modules: a data converter and a layout calculator. The data converter is used to convert the style information of layer elements in the aforementioned DSL data, generating target style information adapted to the front-end description language; it is also used to convert the element types of layer elements in the aforementioned DSL data, generating general element types adapted to the front-end description language. The layout calculator is used to construct a coordinate system based on the structural information of layer elements in the aforementioned DSL data, and convert the structural information of each layer element into target layout information in the aforementioned coordinate system. Alternatively, at least some of the functions of one or more of these modules can be combined with at least some of the functions of other modules and implemented in one module. For example, refer to... Figure 10 As shown, the rendering layer content generation module 1005 and the rendering processing module 1006 can be merged into the same functional module: the layer processor.

[0185] At least one of the functional modules included in the aforementioned device 1000 can be at least partially implemented as hardware circuits, such as field-programmable gate arrays (FPGAs), programmable logic arrays (PLAs), systems-on-a-chip, systems-on-a-substrate, systems-on-package, application-specific integrated circuits (ASICs), or any other reasonable means of integrating or packaging circuits, or implemented in software, hardware, or firmware, or in any appropriate combination of any of these three methods. Alternatively, at least one of the functional modules included in the aforementioned device 1000 can be at least partially implemented as a computer program module, which can perform corresponding functions when the computer program module is run.

[0186] Within the renderer's functional module architecture, which includes a data converter, layout calculator, and layer processor, user operations are executed through manipulators. Data is exchanged between the renderer and the data manager via a data manager. Manipulators include layer manipulators, canvas manipulators, and text manipulators.

[0187] The user's interaction process for editing design files can be simplified as follows:

[0188] First, users can click on layer elements to select them as needed. Selecting an element can be understood as selecting a layer (the relevant behaviors or operations related to layers are managed uniformly in the layer manager).

[0189] Then, based on the selected layer element, generate and display the property panel corresponding to the form configuration items of the selected layer element's attributes, for example, in Figure 7B The example shown is displayed in the properties panel on the right.

[0190] Next, process user operations on elements in the design draft, whether direct or indirect, to modify their attributes, and generate new element data.

[0191] Finally, the new element data is passed to the data manager, which updates the existing data and notifies the renderer to update the view, thus enabling online real-time editing.

[0192] Figure 11 The diagram schematically illustrates a scenario interaction timing diagram of a file online processing apparatus performing data processing according to an embodiment of the present disclosure.

[0193] For example, refer to Figure 11 The diagram illustrates the interaction process between a web application on a device that processes the file online, such as browser 1102, user 1101, and server 1103.

[0194] User 1101 uploads a design draft file to the browser 1102 interface on the device. The browser packages the design draft file and uploads it to server 1103. Server 1103 performs a zip-like decompression and extracts the metadata of the design draft file, which is a layer file in JSON format. After receiving the metadata, browser 1102 parses it to generate DSL data (e.g., it can be parsed using a design draft parser). It then converts the display information of the layer elements in the DSL data to generate target display information adapted to the front-end description language. That is, it parses the DSL data into renderable data that the browser can understand (including design draft elements, auxiliary elements (e.g., shadow effects), and attribute information of each element), and renders the style structure information of the design draft elements based on the layer processor. A preview view consistent with the design draft page is then presented on the browser 1102 interface. Additionally, the data manager stores intermediate processing results data of the preview design draft file, such as the target display information, which can be stored in the browser's memory. Based on the settings of the rendering layer and auxiliary layer, the preview view presented in the browser interface is editable. User 1101 can select a specific element on the page, and the browser will determine the form configuration items corresponding to the element's attributes based on the selected element and display the corresponding attribute panel on the interface.

[0195] User 1101 can modify element attributes in the attribute panel or directly manipulate individual elements to perform various editing operations (image replacement, text editing, grouping layer changes, mask modification, etc.). The operator captures each user's operation and generates new element data accordingly (in some embodiments, this may be the entire data including updated data; in other embodiments, it may only include updated data). The generated new element data is then sent to the data manager. The data manager submits the data to the layer processor, which instructs the layer processor to render the new element data and present the updated view in the browser interface.

[0196] A third exemplary embodiment of this disclosure provides an electronic device.

[0197] Figure 12 A schematic block diagram of an electronic device provided in an embodiment of the present disclosure is shown.

[0198] Reference Figure 12 As shown, the electronic device 1200 provided in this embodiment includes a processor 1201, a communication interface 1202, a memory 1203, and a communication bus 1204. The processor 1201, the communication interface 1202, and the memory 1203 communicate with each other through the communication bus 1204. The memory 1203 is used to store computer programs. When the processor 1201 executes the program stored in the memory, it implements the online file processing method described above.

[0199] A fourth exemplary embodiment of this disclosure also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program that, when executed by a processor, implements the online file processing method described above.

[0200] The computer-readable storage medium may be included in the device / apparatus described in the above embodiments; or it may exist independently and not assembled into the device / apparatus. The computer-readable storage medium carries one or more programs that, when executed, implement the method according to the embodiments of this disclosure.

[0201] According to embodiments of this disclosure, the computer-readable storage medium can be a non-volatile computer-readable storage medium, such as including, but not limited to: portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this disclosure, the computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0202] It should be noted that, in this document, relational terms such as “first” and “second” are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms “comprising,” “including,” or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus.

[0203] The above description is merely a specific embodiment of this disclosure, enabling those skilled in the art to understand or implement it. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this disclosure. Therefore, this disclosure is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.

Claims

1. A method for online file processing, characterized in that, include: Receive design draft files and preview requests for the design draft files; Obtain the metadata of the design file; The metadata is parsed and processed to generate Domain-Specific Description Language (DSL) data for describing the layer elements in the design file; The display information of layer elements in the DSL data is transformed to generate target display information that is compatible with the front-end description language; Based on the target display information, generate the layer content of the rendering layer; The layer content of the rendering layer is rendered, and a preview view of the design file is generated in the display interface corresponding to the preview request; The rendering layer is configured with a corresponding auxiliary layer, which is used to edit and control the content of the rendering layer. The method further includes: Receive editing instructions to edit the previewed target design file; Generate the layer content of the auxiliary layer according to the editing instructions; Based on the layer content of the auxiliary layer, the layer content of the target rendering layer of the target design file is edited and controlled to obtain the updated layer content of the target rendering layer; The updated layer content of the target rendering layer is rendered, and an updated view of the design file is generated in the display interface corresponding to the editing command.

2. The method according to claim 1, characterized in that, The editing instructions include at least one of the following: layer editing instructions, canvas editing instructions, or text editing instructions; the auxiliary layer includes a layer control layer, a canvas control layer, and a text editing layer. The generation of the layer content of the auxiliary layer according to the editing instructions includes at least one of the following: Based on the layer editing instructions, generate layer update instructions for the layer control layer; Based on the canvas editing instructions, generate the canvas update instructions for the canvas control layer; Based on the text editing instructions, generate text update instructions for the text editing layer; Specifically, based on the layer content of the auxiliary layer, the layer content of the target rendering layer of the target design file is edited and controlled to obtain the updated layer content of the target rendering layer, including: Editing control is performed on the layer content of the target rendering layer according to at least one of the layer update instruction, the canvas update instruction, or the text update instruction to obtain the updated layer content of the target rendering layer.

3. The method according to claim 2, characterized in that, The layer control layer includes a selection layer and a mask layer. The selection layer is used to highlight the content of the selected layer in the rendering layer. The selection layer and its property panel are used to apply one or more of the following editing operations: position information editing operation, layer information editing operation, group information editing operation, and general style editing operation. The mask layer is used to display the mask shape and the elements clipped by the mask. The mask layer's property panel is used to apply mask information editing operations. The canvas control layer includes a reference line layer and a scaling layer. The reference line layer is used to display auxiliary lines, and the scaling layer is used to scale the canvas according to the canvas scaling command. The text editing layer includes a text content input layer and a text style attribute layer; the text editing instructions include editing instructions that change the text content and the text style.

4. The method according to claim 2 or 3, characterized in that, The layer editing commands include: layer selection commands for specific layer elements; Upon receiving the layer selection instruction, the method further includes: determining the form configuration items corresponding to the display attributes of the specific layer element; and displaying the attribute panel of the specific layer element according to the form configuration items. The updated layer content of the target rendering layer is rendered, and an updated view of the design file is generated in the display interface corresponding to the editing command, including: Render the element selection effect in the preview view of the design file to obtain the updated view of the design file; The attribute panel and the update view are both displayed on the display interface corresponding to the editing command.

5. The method according to claim 4, characterized in that, The layer editing instructions also include at least one of the layer operation instructions or attribute editing instructions; The step of receiving editing instructions to edit the previewed design file includes: Receive at least one layer editing instruction, either an attribute editing instruction for the attribute panel or an operation instruction for a specific layer element in the preview view; The operation instructions include one or more of the following: location information editing operation instructions, hierarchy information editing operation instructions, combined information editing operation instructions, general style editing operation instructions, or mask information editing operation instructions.

6. The method according to claim 2 or 3, characterized in that, When the layer editing instructions include updating the position information of a specific layer element, the method further includes: The canvas control layer controls the canvas display guide lines that carry the design draft file view. The guide lines are used to mark the position of specific layer elements during movement. Determine whether the specific layer element has a pre-defined target element for alignment; When a target element is preset in a specific layer element, it is detected whether the position of the specific layer element falls within a preset distance range of the target element; If the position of the specific layer element is detected to fall within a preset distance range of the target element, the specific layer element is automatically moved to a position aligned with the target element.

7. The method according to claim 1, characterized in that, The display information of layer elements in the DSL data is transformed to generate target display information adapted to the front-end description language, including: The style information of the layer elements in the DSL data is converted to generate target style information that is compatible with the front-end description language; The element types of the layer elements in the DSL data are converted to generate a general element type that is compatible with the front-end description language; A coordinate system is constructed based on the structural information of the layer elements in the DSL data, and the structural information of each layer element is converted into target layout information under the coordinate system.

8. The method according to claim 1, characterized in that, The metadata is parsed and processed to generate Domain-Specific Description Language (DSL) data for describing the layer elements in the design file, including: The canvas data in the metadata is parsed to obtain canvas parsing data; The drawing board parsing data is used as input to a predefined DSL framework structure to generate DSL data.

9. The method according to claim 8, characterized in that, The canvas data of the aforementioned metadata is parsed to obtain canvas parsing data, including: The coordinates of the borders in the centered and inner positions are corrected to obtain accurate coordinates that can be used directly. Adjust the transparency settings for transparency pass-through to obtain accurate transparency that can be used directly; Convert relative coordinates to absolute coordinates; Adjust the origin of the coordinate system from the specified position to the origin; Crop and correct content that is outside the cropping area and needs to be cropped. Determine if there are special component information, sliced ​​areas, invisible areas, and layer overlay status; In the presence of special component information, the original information of the canvas and special components corresponding to the metadata is parsed and extracted, and the original information corresponding to the special components is mixed into the special component instances in the canvas in proportion. If a sliced ​​region exists, hide the layers within that sliced ​​region; If invisible areas exist, remove the information from the invisible area layer; When layers are overlaid, the layer order is adjusted based on the visually reasonable effect of overlay rendering.

10. The method according to claim 8, characterized in that, The drawing board parsing data is used as input to a predefined DSL framework structure to generate DSL data, including: The canvas parsing data is used as input information for the DSL structure to generate layer data for each layer element; the DSL framework structure includes: element type, layer ID, layer name, layer value, structure information, style information, and sublayer information for each layer element; the layer value includes one or more of the following: graphic path information, text information, or image information; By setting the multi-level sub-layer data of each layer element to the same level, DSL data containing only one level of parent-child layer relationship is obtained.

11. An apparatus for online document processing, characterized in that, include: The request receiving module is used to receive design draft files and preview requests for the design draft files; Metadata acquisition module, used to acquire the metadata of the design draft file; The parsing module is used to parse and process the metadata to generate DSL data that describes the layer elements in the design file; The information conversion module is used to convert the display information of layer elements in the DSL data and generate target display information that is compatible with the front-end description language. The rendering layer content generation module is used to generate the layer content of the rendering layer based on the target display information. The rendering processing module is used to render the content of the rendering layer and generate a preview view of the design file in the display interface corresponding to the preview request. The rendering layer is configured with a corresponding auxiliary layer, which is used to edit and control the content of the rendering layer. The rendering layer content generation module is also used for: Receive editing instructions to edit the previewed target design file; Generate the layer content of the auxiliary layer according to the editing instructions; The rendering processing module is also used to: edit and control the layer content of the target rendering layer of the target design file according to the layer content of the auxiliary layer, so as to obtain the updated layer content of the target rendering layer; The updated layer content of the target rendering layer is rendered, and an updated view of the design file is generated in the display interface corresponding to the editing command.

12. An electronic device, characterized in that, It includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, when executing a program stored in memory, implements the method of any one of claims 1-10.

13. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1-10.

Images