A method, system and terminal for referencing across file canvas containers in a prototyping tool

Abstract

This invention discloses a method, system, and terminal for referencing cross-file canvas containers in a prototyping tool, relating to the field of software design technology. The key technical points are: This invention replaces traditional URL string references with structured reference identifiers composed of file identifiers and canvas identifiers in the design state, allowing the host canvas to establish reference relationships without merging target design files, eliminating the risk of version conflicts and the heavy workload associated with merging multiple files; simultaneously, by introducing an interactive event interception module in the runtime state to detect and distribute the interactive context within the container, navigation actions triggered within the container are restricted to the container itself, preventing them from interfering with the routing state of the host canvas. This solves the problem of uncontrolled demonstrations caused by navigation conflicts in multi-screen presentations in existing technologies, achieving stable parallel display of multiple container interfaces.

Description

Technical Field

[0001] This invention relates to the field of software design technology, and more specifically, to a method, system, and terminal for referencing cross-file canvas containers in a prototyping tool. Background Technology

[0002] In the prototyping phase of fields such as industrial automation, rail transportation, and power, human-machine interfaces (HMIs) typically consist of multiple physical displays, each with its own independent interface design. Design teams often need to complete the development of a single-screen interface in their respective independent design files. At the same time, in order to verify the multi-screen linkage logic before delivery, designers need to integrate and demonstrate the scattered files.

[0003] However, existing prototyping tools (such as Axure RP) only support nested canvases within the same design file using inline frames, failing to support cross-design file canvas referencing. This forces designers to manually merge multiple independent files into a single large file for demonstration, disrupting existing team workflows and easily causing version conflicts during the merging process, severely impacting design iteration efficiency. Furthermore, even though some low-code platforms (such as UIOTOS) support page nesting, they often use URL (Uniform Resource Locator) string attributes for configuration, requiring designers to manually enter paths. This lacks a visual configuration interface and typically doesn't distinguish between design and runtime states, making reference previews impossible during the design editing phase. More critically, existing technologies generally lack effective container interaction isolation mechanisms. When navigation actions such as opening views are triggered within a container, the routing state of the host canvas is often directly altered, leading to uncontrolled demonstrations and failing to guarantee stability and independence when multiple containers are displayed in parallel.

[0004] Therefore, researching and designing a method, system, and terminal for referencing cross-file canvas containers in prototyping tools that can overcome the above-mentioned defects is an urgent problem to be solved. Summary of the Invention

[0005] To address the shortcomings of existing technologies, the present invention aims to provide a method, system, and terminal for referencing cross-file canvas containers in prototyping tools. By using a structured reference identifier composed of file identifiers and canvas identifiers in the design state to replace traditional URL string references, the host canvas can establish a reference relationship without merging the target design files, eliminating the risk of version conflicts and heavy workload caused by merging multiple files. At the same time, by introducing an interactive event interception module in the runtime state to detect and distribute the interactive context within the container, navigation actions triggered within the container are restricted to the container and prevented from interfering with the routing state of the host canvas.

[0006] The above-mentioned technical objective of the present invention is achieved through the following technical solution: Firstly, a method for referencing cross-file canvas containers in a prototyping tool is provided, including the following steps: In the design state of the prototyping tool, in response to the user's configuration operation on the cross-file canvas container component in the host canvas, the tool receives the target design file and target canvas selected by the user through a visual interactive configuration panel, and generates a structured reference identifier. The structured reference identifier is persistently stored in the component configuration data of the cross-file canvas container component, wherein the structured reference identifier consists of a system-unique file identifier corresponding to the target design file and a unique canvas identifier corresponding to the target canvas. During the running state of the prototyping tool, the structured reference identifier of the cross-file canvas container component is read through the cross-file view loader; the target canvas content in the target design file is dynamically obtained and loaded, and the target canvas content is injected into the rendering area of ​​the cross-file canvas container component; The interactive event interception module detects the triggering context of interactive actions. When an interactive action is detected to occur within the document object model area of ​​the cross-file canvas container component, the interactive action is intercepted or passed through according to preset rules to achieve routing isolation between the internal interaction of the cross-file canvas container and the host canvas.

[0007] Furthermore, receiving the target design file and target canvas selected by the user through the visual interactive configuration panel includes: In response to the user's selection of the cross-file canvas container component, an interactive configuration panel is displayed in the sidebar of the prototyping tool's editing interface. The interactive configuration panel displays all design file names and corresponding canvas names under the current project in the form of a drop-down menu; In response to the user's selection in the drop-down menu, the file identifier corresponding to the selected design file and the canvas identifier corresponding to the canvas are automatically written into the structured reference identifier.

[0008] Furthermore, the generation of structured reference identifiers includes: When the target design file is created, a globally unique file identifier is automatically assigned by the system; When the canvas is created within the target design file, a unique canvas identifier is automatically assigned by the system within the file; The file identifier and the canvas identifier are combined in the form of a tuple to form a structured reference identifier, wherein the structured reference identifier does not become invalid as the file name or canvas name changes.

[0009] Furthermore, the dynamic acquisition and loading of the target canvas content in the target design file includes: Query the locally maintained filename-to-file identifier mapping cache to determine whether the file identifier corresponding to the target design file exists in the cache; If the cache is not hit, then request all canvas data of the target design file through the application programming interface. In the returned list of canvas data, the target canvas is located based on the canvas identifier, and the scalable vector graphics content and interactive configuration data of the target canvas are extracted. The scalable vector graphics content is injected into the document object model area of ​​the cross-file canvas container component, and interactive event handlers are bound to the graphic elements according to the interactive configuration data.

[0010] Furthermore, the method also includes: After the cross-file canvas container component loads the target canvas content, the target canvas directly reuses the project-level device data layer module; The project-level device data layer module uniformly manages device connections and tag data push. Components within the target canvas automatically receive real-time data from the corresponding device tags without requiring additional subscription operations.

[0011] Furthermore, the interception or transmission of the interactive action according to preset rules includes: When the cross-file canvas container component is initialized, a unique container instance identifier attribute is written to the root document object model node of the cross-file canvas container component; When an interactive action is triggered, the event bubbling path is used to detect whether the triggering node of the interactive action passes through the container node carrying the container instance identifier attribute, in order to determine whether the interactive action occurs within the container context. If the interaction action is determined to be an open view action, then the open view action is intercepted and redirected to switch the canvas currently displayed by the cross-file canvas container component itself.

[0012] Furthermore, the method also includes: If the interaction action is determined to be a container canvas switching action, then the container canvas switching action is allowed to be executed, and the display content of the current cross-file canvas container component or the specified cross-file canvas container component is switched to the target canvas, wherein the target canvas may be located in the cross-file design file; If the interaction action is determined to be a device write action, then the device write action is not intercepted, and it is directly passed through to the device connection layer.

[0013] Secondly, a cross-file canvas container referencing system is provided in a prototyping tool, including: The interactive configuration module is used in the design state of the prototyping tool to respond to the user's configuration operations on the cross-file canvas container component in the host canvas. It receives the target design file and target canvas selected by the user through a visual interactive configuration panel and generates a structured reference identifier. The reference storage module is used to persistently store the structured reference identifier in the component configuration data of the cross-file canvas container component, wherein the structured reference identifier consists of a file identifier unique to the system corresponding to the target design file and a canvas identifier unique to the target canvas. A view loading module is used to read the structured reference identifier of the cross-file canvas container component through the cross-file view loader during the runtime of the prototyping tool. The rendering engine module is used to dynamically acquire and load the target canvas content from the target design file, and inject the target canvas content into the rendering area of ​​the cross-file canvas container component. The event interception module is used to detect the triggering context of interactive actions through the interactive event interception module. When an interactive action is detected to occur within the document object model area of ​​the cross-file canvas container component, the interactive action is intercepted or passed through according to preset rules to achieve routing isolation between the internal interaction of the cross-file canvas container and the host canvas.

[0014] Furthermore, the view loading module is also configured as follows: Maintain a local filename-to-file identifier mapping cache. Before loading the target canvas, first check the cache. If the cache is not hit, then request all canvas data of the target design file through the interface to reduce duplicate interface requests.

[0015] Thirdly, a computer terminal is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the computer program, implements a method for referencing a cross-file canvas container in a prototyping tool as described in any one of the first aspects.

[0016] Compared with the prior art, the present invention has the following beneficial effects: 1. This invention provides a method for referencing cross-file canvas containers in a prototyping tool. By using a structured reference identifier composed of file identifiers and canvas identifiers in the design state to replace the traditional URL string reference, the host canvas can establish a reference relationship without merging the target design files, eliminating the risk of version conflicts and heavy workload caused by merging multiple files. At the same time, by introducing an interactive event interception module in the runtime state to detect and distribute the interactive context within the container, the navigation actions triggered within the container are restricted to the container and prevented from interfering with the routing state of the host canvas. This solves the problem of presentation loss of control caused by navigation conflicts in multi-screen presentations in the prior art and realizes stable parallel display of multi-container interfaces.

[0017] 2. The file identifier and canvas identifier mentioned in this invention are not manually defined file names or canvas names, but rather unique system identifiers automatically assigned by the system when the design file and canvas are created. Because the reference relationship is based on a binary structure established by this underlying system identifier, rather than on volatile text names, the structured reference identifier remains valid even if the user repeatedly modifies the file name or canvas name during the design process. This solves the technical problem in the prior art where renaming causes references to become invalid and requires frequent reconfiguration.

[0018] 3. This invention provides a drop-down menu selection mechanism through a visual interactive configuration panel, eliminating the need for designers to manually concatenate and input complex URL strings as in existing technologies. The system automatically converts the user-selected file and canvas into underlying file and canvas identifiers. This configuration method significantly reduces the operational difficulty for non-developers, avoids loading failures caused by manual input errors, and significantly improves configuration efficiency and accuracy.

[0019] 4. This invention introduces a filename-to-file identifier mapping caching mechanism. Before loading the target canvas, the system first queries the local cache, and only requests the complete canvas data of the target design file through the application programming interface if the cache is not found. This effectively reduces repeated network requests and data transfer volume, speeds up the rendering of canvas content, and solves the technical problem of slow loading and lag in large projects containing a large number of design files.

[0020] 5. This invention changes the traditional container-based independent subscription model, adopting a project-level device data layer module to uniformly manage device connections and tag data push. When a target canvas is loaded across file canvas containers, the elements within the canvas directly reuse the data channels already established at the project's top level, automatically receiving real-time data from the corresponding device tags, without the need for additional tag extraction and subscription registration operations. This mechanism simplifies data flow management, reduces system overhead, and solves the problems of data redundancy and connection resource waste caused by duplicate subscriptions in multi-container scenarios.

[0021] 6. This invention accurately determines the context of an interaction by writing a unique container instance identifier attribute during container initialization and detecting this attribute through event bubbling when an interactive action is triggered. Based on this detection mechanism, the system can intercept view opening actions within the container and redirect them to only switch the canvas displayed by the container itself, preventing navigation changes to the entire host canvas caused by jump actions within the container and ensuring the independence of each screen interface during multi-screen demonstrations.

[0022] 7. The invention implements differentiated processing strategies for different types of interactive actions. For switching container canvases, the system allows its execution, thus achieving a linkage effect where one container controls the switching of another container's screen. For device write operations, the system does not intercept them but directly transmits them to the device connection layer. This categorized processing mechanism not only meets the needs of complex business logic linkage but also ensures that control commands can be issued to the underlying devices in real time, solving the problem that a single interception strategy cannot meet the needs of complex industrial control scenarios. Attached Figure Description

[0023] The accompanying drawings, which are included to provide a further understanding of embodiments of the invention and form part of this application, do not constitute a limitation thereof. In the drawings: Figure 1 This is a flowchart from Embodiment 1 of the present invention; Figure 2 This is a system block diagram in Embodiment 3 of the present invention. Detailed Implementation

[0024] To make the objectives, technical solutions, and advantages of the present invention clearer, the present invention will be further described in detail below with reference to the embodiments and accompanying drawings. The illustrative embodiments and descriptions of the present invention are only used to explain the present invention and are not intended to limit the present invention.

[0025] Example 1: A method for referencing cross-file canvas containers in a prototyping tool, such as... Figure 1 As shown, it includes the following steps: S1: In the design state of the prototyping tool, in response to the user's configuration operation on the cross-file canvas container component in the host canvas, the target design file and target canvas selected by the user are received through the visual interactive configuration panel, and a structured reference identifier is generated; the structured reference identifier is persistently stored in the component configuration data of the cross-file canvas container component, wherein the structured reference identifier consists of a system-unique file identifier corresponding to the target design file and a unique canvas identifier corresponding to the target canvas; S2: In the running state of the prototyping tool, read the structured reference identifier of the cross-file canvas container component through the cross-file view loader; dynamically obtain and load the target canvas content in the target design file, and inject the target canvas content into the rendering area of ​​the cross-file canvas container component; S3: The interactive event interception module detects the triggering context of interactive actions. When an interactive action is detected to occur within the document object model area of ​​a cross-file canvas container component, the interactive action is intercepted or passed through according to preset rules to achieve routing isolation between the interaction inside the cross-file canvas container and the host canvas.

[0026] In step S1, in the design state of the prototyping tool, the cross-file canvas container component reference configuration process is executed first. After logging into the prototyping tool (such as a reality platform), the designer opens a host design file, i.e., the file containing the host canvas. In the component library of the editing interface, the designer selects the cross-file canvas container component and drags it into the host canvas. At this time, the system detects the user's configuration operation on the container component and, in response to this operation, automatically brings up the interactive configuration panel in the sidebar of the editing interface.

[0027] The interactive configuration panel provides a visual dropdown selection control. Specifically, it first iterates through all design files in the current project space, extracts the filename of each file and its corresponding system-unique file identifier (fileId), and populates it into the first dropdown menu. Then, based on the target design file selected by the user, it extracts all canvas names within that file and their corresponding unique canvas identifiers (canvasId), and populates them into the second dropdown menu. Designers do not need to manually enter the URL path; they only need to select design file A and the main operation interface with two clicks.

[0028] In response to the user's selection in the dropdown menu, the system automatically captures the selected file identifier and canvas identifier. These two are combined as a tuple to generate a structured reference identifier. The construction of this identifier follows this logic: Let IDstruct be the structured reference identifier, fileId be the globally unique file identifier assigned by the system to the target design file, and canvasId be the unique canvas identifier assigned by the system within the target canvas file. Then, IDstruct = (fileId, canvasId). Here, fileId is a UUID (Universally Unique Identifier) ​​automatically generated by the system when the target design file is created, and canvasId is a serial number automatically generated by the system when the canvas is created within that file. Neither changes when the user modifies the filename or canvas name, thus ensuring the stability of the reference relationship.

[0029] Finally, this structured reference identifier is persisted as an attribute field in the component configuration JSON (JavaScript Object Notation) data structure of the cross-file canvas container component. For example, this JSON data might contain key-value pairs: "crossFileRef":{"fileId":"uuid_xxx","canvasId":"canvas_001"}. At this point, the design-state configuration process is complete, and the container component can visually render a preview thumbnail of the target canvas in real time, awaiting the runtime loading command.

[0030] In step S2, after the prototyping tool enters the running state, the loading process of the cross-file canvas container component is initiated. The Cross File View Loader first reads the structured reference identifier stored in the component configuration data of the cross-file canvas container component. This identifier contains the file identifier corresponding to the target design file and the canvas identifier corresponding to the target canvas, serving as the credential for subsequent data requests.

[0031] Next, the dynamic acquisition and loading process is executed. The cross-file view loader first queries the locally maintained cache of filename-to-file identifier mappings. This cache stores historical query results to improve loading efficiency. It then checks if the file identifier corresponding to the target design file exists in the cache; if the cache is not found, it requests all canvas data of the target design file through the application interface. This mechanism avoids duplicate network requests and optimizes runtime response speed.

[0032] Upon receiving the returned list of canvas data, the cross-file view loader locates the relevant element in the list based on the canvas identifier. Since the canvas identifier is unique within a file, the system can accurately extract the scalable vector graphics (SVG) content and interactive configuration data (Gauge Settings) of the target canvas. The scalable vector graphics content defines the visual element structure of the canvas, while the interactive configuration data defines the element's response logic.

[0033] After obtaining the above data, content injection and binding are performed. Scalable vector graphics content is injected into the rendering area (DOM) of the cross-file canvas container component, and interactive event handlers are bound to the graphic elements according to the interaction configuration data. At this point, the target canvas is ready to be displayed in the host canvas.

[0034] In addition, at the data level, the present invention adopts a project-level data reuse mechanism. The target canvas directly reuses the device data layer module at the project level. Since device connection and tag data pushing are uniformly managed and globally effective at the project level, after the target canvas is loaded, the components inside it can automatically receive real-time data of the corresponding device tags without performing additional subscription operations.

[0035] In step S3, in the running state of the prototyping tool, when the cross-file canvas container component finishes loading the content, the system activates the interaction event interception module to achieve routing isolation between the container and the host canvas.

[0036] First, when initializing the cross-file canvas container component, a unique container instance identification attribute is written to its root rendering area. This attribute serves as the identity of the container instance and is used to distinguish the source of events in a complex document structure. For example, the system may mark a specific attribute value on the root node of the container for identification in subsequent event detection.

[0037] When an interaction action (such as a mouse click or a touch operation) is triggered, the interaction event interception module starts the detection process. The system detects whether the triggering node of the interaction action passes through the container node carrying the container instance identification attribute through the event bubbling path. Specifically, the system traces up along the propagation path of the event trigger to check whether there is a node with this specific identification attribute in the path, so as to accurately determine whether the interaction action occurs within the container context.

[0038] If it is determined that the interaction action is an open view action, the system will intercept this action. Usually, this action should cause the host canvas to jump to a new page, but in the present invention, the system redirects it to only switch the currently displayed canvas of the cross-file canvas container component itself. For example, when the user clicks a button inside the container to try to open a new view, the system only refreshes the display content inside the container, while the host canvas and other containers at the same level remain unchanged, thus achieving routing isolation.

[0039] In some optional examples, this step also supports cross-container linkage control. If it is determined that the interaction action is a switch container canvas action, then this action is allowed to be executed, and the display content of the current cross-file canvas container component or a specified cross-file canvas container component is switched to the target canvas, where the target canvas can be located in a cross-file design document. For example, a button in container A can be configured to trigger container B to switch to a specific alarm history screen, and this mechanism can achieve complex multi-screen linkage without writing code.

[0040] If the interaction action is determined to be a device write action, the interaction event interception module will not intercept the action and will directly pass it through to the device connection layer. Such actions usually involve modification instructions to the underlying hardware or data source, which need to penetrate the container layer to reach the data source directly. Therefore, they are not intercepted to ensure the real-time performance and effectiveness of the control instructions.

[0041] Example 2: An industrial multi-screen HMI prototype demonstration is used as an example for illustration.

[0042] In industrial HMI prototyping projects, design teams typically create multiple independent design files, such as design file A, design file B, and design file C, corresponding to the main operation screen, status monitoring screen, and alarm display screen, respectively. In the traditional model, to demonstrate the multi-screen interaction effect to clients, the design lead must spend a significant amount of time merging these three files into one large file. This not only disrupts the team's division of labor but also easily leads to version conflicts. However, with this invention, the design lead no longer needs to perform the tedious merging process; they only need to create a new host canvas for demonstration to begin the integration work.

[0043] In the design state of the host canvas, the design lead drags a cross-file canvas container component from the component library. Selecting this component automatically brings up the interaction configuration panel in the sidebar. This panel provides a visual dropdown menu listing all design file names and their contained canvas names under the current project, such as Design File A and the main interface. Designers no longer need to manually search and enter complex URL paths as with traditional tools; they can intuitively complete the reference configuration for target files with just two clicks.

[0044] The system backend automatically generates a structured reference identifier based on the user's selection. This identifier consists of a tuple of a system-assigned file identifier and a canvas identifier, for example, represented as (file identifier A, canvas identifier 1). Since these two identifiers are automatically generated by the system when the file is created, even if the designer subsequently renames the design file A to the main control interface, the reference relationship remains valid, solving the problem of reference invalidation caused by renaming. This identifier is then persistently stored in the component configuration data of the container component.

[0045] Once in runtime, the cross-file view loader begins its work. It first reads the structured reference identifiers from the container component and then queries the locally maintained filename-to-file identifier mapping cache. If the file data is not found in the cache, the system will request all canvas data for design file A through the application programming interface. This caching mechanism effectively reduces redundant network requests and improves loading efficiency.

[0046] After obtaining the data, the system accurately locates the main operation interface in the returned data list based on the canvas identifier. The system extracts the scalable vector graphic content and interaction configuration data of the canvas and injects them into the rendering area of the cross-file canvas container component.

[0047] During the interaction demonstration process, the interaction event interception module is responsible for ensuring the stability of multi-container parallelism. When the user clicks the parameter setting button in container A, the button is configured with an action to open the view. The interaction event interception module identifies that this action occurs in the rendering area of container A by detecting the event bubbling path. To prevent the entire demonstration page from being redirected, the system intercepts this action and redirects it to only switch the canvas displayed inside container A, thus achieving routing isolation between in-container interactions and the host canvas.

[0048] In addition, this solution also supports cross-container linkage control. For example, a button in container A can be configured with an action to switch the container canvas, specifying to switch the display content of container C to the historical alarm canvas. The system allows such actions to be transparently executed, enabling different containers to work together. For control instructions such as device writing values that need to directly act on the underlying hardware, the system does not intercept them and directly transmits them to the device connection layer to ensure the real-time nature of the control.

[0049] Embodiment 3: A reference system for cross-file canvas containers in a prototyping tool, which is used to implement the method for referencing cross-file canvas containers in a prototyping tool described in Embodiment 1, as Figure 2 shown, including an interaction configuration module, a reference storage module, a view loading module, a rendering engine module, and an event interception module.

[0050] The system comprises the following modules: An interaction configuration module, used in the design state of the prototyping tool, responds to user configuration operations on cross-file canvas container components within the host canvas. It receives the target design file and target canvas selected by the user through a visual interaction configuration panel and generates a structured reference identifier. A reference storage module persistently stores the structured reference identifier in the component configuration data of the cross-file canvas container component. The structured reference identifier consists of a system-unique file identifier corresponding to the target design file and a unique canvas identifier corresponding to the target canvas. A view loading module, used in the runtime state of the prototyping tool, reads the structured reference identifier of the cross-file canvas container component through a cross-file view loader. A rendering engine module dynamically acquires and loads the target canvas content from the target design file and injects it into the rendering area of ​​the cross-file canvas container component. An event interception module detects the triggering context of interactive actions through the interaction event interception module. When an interactive action is detected occurring within the document object model area of ​​the cross-file canvas container component, it intercepts or passes the interactive action according to preset rules to achieve routing isolation between the interaction within the cross-file canvas container and the host canvas.

[0051] In addition, the view loading module is configured to maintain a mapping cache of local filenames to file identifiers, prioritize querying the cache before loading the target canvas, and then request all canvas data of the target design file through the interface if the cache is not hit, so as to reduce duplicate interface requests.

[0052] Example 4: A computer terminal includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements a method for referencing cross-file canvas containers in a prototyping tool as described in Example 1.

[0053] Working principle: This invention replaces traditional URL string references with structured reference identifiers composed of file identifiers and canvas identifiers in the design state. This allows the host canvas to establish reference relationships without merging target design files, eliminating the risk of version conflicts and heavy workload caused by merging multiple files. At the same time, by introducing an interactive event interception module in the runtime state to detect and distribute the interactive context within the container, navigation actions triggered within the container are restricted to the container itself, preventing them from interfering with the routing state of the host canvas. This solves the problem of presentation loss of control caused by navigation conflicts in multi-screen presentations in existing technologies, and achieves stable parallel display of multi-container interfaces.

[0054] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0055] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0056] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0057] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0058] The specific embodiments described above further illustrate the purpose, technical solution, and beneficial effects of the present invention. It should be understood that the above description is only a specific embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for referencing cross-file canvas containers in a prototyping tool, characterized in that, Includes the following steps: In the design state of the prototyping tool, in response to the user's configuration operation on the cross-file canvas container component in the host canvas, the tool receives the target design file and target canvas selected by the user through a visual interactive configuration panel, and generates a structured reference identifier. The structured reference identifier is persistently stored in the component configuration data of the cross-file canvas container component, wherein the structured reference identifier consists of a system-unique file identifier corresponding to the target design file and a unique canvas identifier corresponding to the target canvas. During the running state of the prototyping tool, the structured reference identifier of the cross-file canvas container component is read through the cross-file view loader; the target canvas content in the target design file is dynamically obtained and loaded, and the target canvas content is injected into the rendering area of ​​the cross-file canvas container component; The interactive event interception module detects the triggering context of interactive actions. When an interactive action is detected to occur within the document object model area of ​​the cross-file canvas container component, the interactive action is intercepted or passed through according to preset rules to achieve routing isolation between the internal interaction of the cross-file canvas container and the host canvas.

2. The method for referencing cross-file canvas containers in a prototyping tool according to claim 1, characterized in that, The process of receiving the target design file and target canvas selected by the user through a visual interactive configuration panel includes: In response to the user's selection of the cross-file canvas container component, an interactive configuration panel is displayed in the sidebar of the prototyping tool's editing interface. The interactive configuration panel displays all design file names and corresponding canvas names under the current project in the form of a drop-down menu; In response to the user's selection in the drop-down menu, the file identifier corresponding to the selected design file and the canvas identifier corresponding to the canvas are automatically written into the structured reference identifier.

3. The method for referencing cross-file canvas containers in a prototyping tool according to claim 1, characterized in that, The generation of structured reference identifiers includes: When the target design file is created, a globally unique file identifier is automatically assigned by the system; When the canvas is created within the target design file, a unique canvas identifier is automatically assigned by the system within the file; The file identifier and the canvas identifier are combined in the form of a tuple to form a structured reference identifier, wherein the structured reference identifier does not become invalid as the file name or canvas name changes.

4. The method for referencing cross-file canvas containers in a prototyping tool according to claim 1, characterized in that, The dynamic acquisition and loading of the target canvas content in the target design file includes: Query the locally maintained filename-to-file identifier mapping cache to determine whether the file identifier corresponding to the target design file exists in the cache; If the cache is not hit, then request all canvas data of the target design file through the application programming interface. In the returned list of canvas data, the target canvas is located based on the canvas identifier, and the scalable vector graphics content and interactive configuration data of the target canvas are extracted. The scalable vector graphics content is injected into the document object model area of ​​the cross-file canvas container component, and interactive event handlers are bound to the graphic elements according to the interactive configuration data.

5. The method for referencing cross-file canvas containers in a prototyping tool according to claim 1, characterized in that, The method also includes: After the cross-file canvas container component loads the target canvas content, the target canvas directly reuses the project-level device data layer module; The project-level device data layer module uniformly manages device connections and tag data push. Components within the target canvas automatically receive real-time data from the corresponding device tags without requiring additional subscription operations.

6. The method for referencing cross-file canvas containers in a prototyping tool according to claim 1, characterized in that, The interception or transmission of the interactive action according to preset rules includes: When the cross-file canvas container component is initialized, a unique container instance identifier attribute is written to the root document object model node of the cross-file canvas container component; When an interactive action is triggered, the event bubbling path is used to detect whether the triggering node of the interactive action passes through the container node carrying the container instance identifier attribute, in order to determine whether the interactive action occurs within the container context. If the interaction action is determined to be an open view action, then the open view action is intercepted and redirected to switch the canvas currently displayed by the cross-file canvas container component itself.

7. The method for referencing cross-file canvas containers in a prototyping tool according to claim 6, characterized in that, The method also includes: If the interaction action is determined to be a container canvas switching action, then the container canvas switching action is allowed to be executed, and the display content of the current cross-file canvas container component or the specified cross-file canvas container component is switched to the target canvas, wherein the target canvas may be located in the cross-file design file; If the interaction action is determined to be a device write action, then the device write action is not intercepted, and it is directly passed through to the device connection layer.

8. A cross-file canvas container referencing system in a prototyping tool, characterized in that, include: The interactive configuration module is used in the design state of the prototyping tool to respond to the user's configuration operations on the cross-file canvas container component in the host canvas. It receives the target design file and target canvas selected by the user through a visual interactive configuration panel and generates a structured reference identifier. The reference storage module is used to persistently store the structured reference identifier in the component configuration data of the cross-file canvas container component, wherein the structured reference identifier consists of a file identifier unique to the system corresponding to the target design file and a canvas identifier unique to the target canvas. A view loading module is used to read the structured reference identifier of the cross-file canvas container component through the cross-file view loader during the runtime of the prototyping tool. The rendering engine module is used to dynamically acquire and load the target canvas content from the target design file, and inject the target canvas content into the rendering area of ​​the cross-file canvas container component. The event interception module is used to detect the triggering context of interactive actions through the interactive event interception module. When an interactive action is detected to occur within the document object model area of ​​the cross-file canvas container component, the interactive action is intercepted or passed through according to preset rules to achieve routing isolation between the internal interaction of the cross-file canvas container and the host canvas.

9. A cross-file canvas container referencing system in a prototyping tool according to claim 8, characterized in that, The view loading module is also configured as follows: Maintain a local filename-to-file identifier mapping cache. Before loading the target canvas, first check the cache. If the cache is not hit, then request all canvas data of the target design file through the interface to reduce duplicate interface requests.

10. A computer terminal, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements a method for referencing cross-file canvas containers in a prototyping tool as described in any one of claims 1-7.

Images